* { box-sizing: border-box; }
    html { background: var(--canvas); }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--canvas);
      font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0;
    }
    button, select, input, textarea { font: inherit; letter-spacing: 0; }
    button, select { cursor: pointer; }
    button:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(36, 99, 160, .22);
      outline-offset: 2px;
    }
    [hidden] { display: none !important; }
    .icon { width: 17px; height: 17px; stroke-width: 2; flex: 0 0 auto; }

    .app-shell {
      display: grid;
      grid-template-columns: 224px minmax(0, 1fr);
      min-height: 100vh;
      transition: grid-template-columns .22s ease;
    }

    .rail {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      height: 100vh;
      flex-direction: column;
      padding: 20px 14px;
      color: var(--rail-text);
      background: var(--rail);
      border-right: 1px solid var(--rail-border);
      overflow-y: auto;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 0 8px 18px;
      border-bottom: 1px solid var(--rail-border);
    }
    .brand-mark {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid var(--rail-border);
      border-radius: 7px;
      color: var(--rail-text);
      background: var(--rail-active);
      font-weight: 900;
    }
    .brand strong, .brand span { display: block; }
    .brand strong { font-size: 13px; }
    .brand span { margin-top: 1px; color: var(--rail-muted); font-size: 10px; }
    .rail-toggle {
      display: grid;
      width: 32px;
      height: 32px;
      flex: 0 0 auto;
      margin-left: auto;
      place-items: center;
      border: 1px solid var(--rail-border);
      border-radius: 5px;
      color: var(--rail-muted);
      background: var(--paper);
    }
    .rail-toggle:hover { color: var(--rail-text); background: var(--rail-hover); }
    .rail-toggle:disabled { cursor: not-allowed; opacity: .55; }
    .rail-toggle .rail-icon-expand { display: none; }
    .rail-label {
      margin: 17px 8px 8px;
      color: var(--rail-muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .company-list { display: grid; gap: 8px; }
    .rail-home { margin: 14px 0 10px; }
    .company-group { display: grid; gap: 2px; }
    .company-button {
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr) 16px;
      gap: 9px;
      align-items: center;
      width: 100%;
      min-height: 52px;
      padding: 7px 8px;
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--rail-text);
      background: transparent;
      text-align: left;
    }
    .company-button:hover { background: var(--rail-hover); }
    .app-context-group .company-button { cursor: default; }
    .company-button[aria-pressed="true"] {
      border-color: var(--rail-border);
      background: var(--rail-active);
      box-shadow: inset 3px 0 0 var(--company-color, #68ba91);
    }
    .company-badge {
      position: relative;
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border-radius: 6px;
      color: #fff;
      background: var(--company-color, #537b68);
      font-size: 11px;
      font-weight: 900;
    }
    .company-copy strong, .company-copy span { display: block; min-width: 0; }
    .company-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .company-copy span { margin-top: 2px; color: var(--rail-muted); font-size: 9px; }
    .company-button .chevron { width: 14px; color: var(--rail-muted); transition: transform .18s ease; }
    .company-group.is-active > .company-button .chevron { transform: rotate(90deg); }
    .company-name-line { display: flex !important; align-items: center; gap: 6px; }
    .company-tag { flex: 0 0 auto; padding: 1px 4px; border: 1px solid var(--rail-border); border-radius: 3px; color: var(--company-color, var(--accent)); background: var(--paper); font-size: 8px; font-weight: 900; }
    .company-links { display: none; gap: 1px; margin: 0 0 2px 40px; }
    .company-group.is-active > .company-links { display: grid; }
    .company-link { display: flex; min-height: 28px; align-items: center; gap: 7px; padding: 4px 7px; border: 0; border-left: 1px solid var(--rail-border); color: var(--rail-muted); background: transparent; text-align: left; font-size: 9px; font-weight: 700; }
    .company-link:hover { color: var(--rail-text); background: var(--rail-hover); }
    .company-link[aria-current="page"] { color: var(--rail-text); background: var(--rail-active); }
    .company-link .icon { width: 13px; height: 13px; }
    .company-badge.has-system::after { content: 'OA'; position: absolute; top: -5px; right: -8px; padding: 1px 3px; border: 1px solid var(--rail-border); border-radius: 3px; color: var(--company-color, var(--accent)); background: var(--paper); font-size: 7px; line-height: 1.2; }
    .mobile-company-links { display: none; }

    .rail-nav { display: grid; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rail-border); }
    .rail-nav button {
      display: flex;
      gap: 9px;
      align-items: center;
      width: 100%;
      min-height: 38px;
      padding: 0 10px;
      border: 0;
      border-radius: 5px;
      color: var(--rail-muted);
      background: transparent;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
    }
    .rail-nav button:hover, .rail-nav button[aria-selected="true"] { color: var(--rail-text); background: var(--rail-active); }
    .nav-count {
      min-width: 20px;
      margin-left: auto;
      padding: 1px 5px;
      border-radius: 8px;
      color: #fff;
      background: var(--danger);
      text-align: center;
      font-size: 9px;
    }
    .rail-workbench { margin-top: auto; padding-top: 10px; }
    .rail-workbench button { border: 1px solid var(--rail-border); background: var(--paper); }
    .rail-tools { position: relative; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--rail-border); }
    .rail-option-button {
      display: flex;
      width: 100%;
      min-height: 38px;
      align-items: center;
      gap: 9px;
      padding: 0 10px;
      border: 0;
      border-radius: 5px;
      color: var(--rail-muted);
      background: transparent;
      text-align: left;
      font-size: 11px;
      font-weight: 800;
    }
    .rail-option-button:hover, .rail-option-button[aria-expanded="true"] { color: var(--rail-text); background: var(--rail-active); }
    .rail-option-button .option-value { margin-left: auto; overflow: hidden; max-width: 75px; color: var(--rail-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .rail-foot {
      padding: 12px 9px 0;
      color: var(--rail-muted);
      font-size: 9px;
    }
    .rail-foot strong { display: block; margin-bottom: 3px; color: var(--rail-text); font-size: 10px; }
    html[data-rail="collapsed"] .app-shell { grid-template-columns: 82px minmax(0, 1fr); }
    html[data-rail="collapsed"] .rail { padding-inline: 10px; }
    html[data-rail="collapsed"] .brand { justify-content: center; padding-inline: 0; }
    html[data-rail="collapsed"] .brand-mark,
    html[data-rail="collapsed"] .brand-copy,
    html[data-rail="collapsed"] .company-copy,
    html[data-rail="collapsed"] .company-button .chevron,
    html[data-rail="collapsed"] .rail-nav span:not(.nav-count),
    html[data-rail="collapsed"] .rail-label,
    html[data-rail="collapsed"] .rail-foot,
    html[data-rail="collapsed"] .rail-option-button span,
    html[data-rail="collapsed"] .rail-option-button .option-value { display: none; }
    html[data-rail="collapsed"] .rail-toggle { margin-left: 0; }
    html[data-rail="collapsed"] .rail-toggle .rail-icon-collapse { display: none; }
    html[data-rail="collapsed"] .rail-toggle .rail-icon-expand { display: block; }
    html[data-rail="collapsed"] .company-button { grid-template-columns: 1fr; justify-items: center; padding: 7px 0; }
    html[data-rail="collapsed"] .company-group.is-active > .company-links { display: grid; margin: 1px 0 5px; }
    html[data-rail="collapsed"] .company-link { width: 42px; min-height: 34px; justify-content: center; gap: 0; margin: 0 auto; padding: 0; border: 0; border-radius: 5px; font-size: 0; }
    html[data-rail="collapsed"] .company-link .icon { width: 16px; height: 16px; }
    html[data-rail="collapsed"] .rail-nav button,
    html[data-rail="collapsed"] .rail-option-button { justify-content: center; padding: 0; }
    html[data-rail="collapsed"] .nav-count { position: absolute; margin: -22px 0 0 25px; }
    [data-card-code] { position: relative; }
    [data-card-code]::after { content: attr(data-card-code); position: absolute; top: 8px; right: 9px; z-index: 1; color: var(--muted); font-size: 8px; font-weight: 900; opacity: .48; pointer-events: none; }
    .panel[data-card-code] > .panel-head { padding-right: 48px; }
    .app-card[data-card-code] .app-card-head { padding-right: 29px; }

    .workspace { min-width: 0; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 3;
      display: flex;
      min-height: 66px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 24px;
      border-bottom: 1px solid var(--line);
      background: var(--topbar);
      backdrop-filter: blur(12px);
    }
    .context-title { min-width: 0; }
    .context-heading { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 3px; }
    .context-module { color: var(--muted); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
    .context-subline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; color: var(--muted); font-size: 10px; }
    .context-subline:has(#context-type:empty):has(#context-app-address[hidden]) { display: none; }
    #context-type { font-weight: 600; }
    .context-app-address { min-width: 0; color: var(--muted); font-family: Consolas, "Microsoft YaHei", monospace; overflow-wrap: anywhere; text-underline-offset: 3px; }
    .context-app-address:hover { color: var(--accent); }
    .context-title h1 {
      overflow: hidden;
      margin: 1px 0 0;
      font-size: 19px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    body[data-active-view="hr"] .top-actions,
    body[data-active-view="hr"] .context-path,
    body[data-active-view="hr"] .context-ribbon,
    body[data-active-view="hr"] .source-line { display: none; }
    body[data-active-view="hr"] .topbar { min-height: 58px; }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .context-path {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 7px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--muted);
      background: #f8faf9;
      font-size: 9px;
      font-weight: 800;
    }
    .context-path b {
      overflow: hidden;
      max-width: 145px;
      color: var(--ink);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .context-path i { color: #a1aaa6; font-style: normal; }
    .select-field { display: grid; gap: 2px; }
    .select-field label { color: var(--muted); font-size: 8px; font-weight: 800; }
    .context-select {
      max-width: 190px;
      height: 36px;
      padding: 0 31px 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      color: var(--ink);
      background: var(--paper);
      font-size: 11px;
      font-weight: 700;
    }
    .date-chip, .data-chip, .theme-chip {
      display: flex;
      min-height: 34px;
      align-items: center;
      gap: 6px;
      padding: 0 9px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--muted);
      background: #f8faf9;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }
    button.data-chip { font-family: inherit; cursor: pointer; }
    .data-chip { color: var(--amber); background: var(--amber-soft); border-color: #efdca5; }
    .data-chip:hover { filter: brightness(.98); }
    .data-chip.connected { color: #1d6b4c; background: #e9f5ef; border-color: #b9ddc9; }
    .data-chip.loading { color: #2768a6; background: #eaf2fb; border-color: #bfd4e9; }
    .data-chip.error { color: var(--danger); background: var(--danger-soft); border-color: #edc4bd; }

    .auth-backdrop {
      position: fixed;
      inset: 0;
      z-index: 30;
      background: rgba(13, 28, 23, .48);
    }
    .auth-dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 31;
      width: min(420px, calc(100vw - 28px));
      transform: translate(-50%, -50%);
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--paper);
      box-shadow: 0 24px 70px rgba(10, 25, 19, .22);
    }
    .auth-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
    .auth-dialog-head h2 { margin: 0; font-size: 17px; }
    .auth-dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
    .auth-form { display: grid; gap: 13px; padding: 18px 20px 20px; }
    .auth-field { display: grid; gap: 5px; color: var(--ink); font-size: 10px; font-weight: 800; }
    .auth-field input { width: 100%; height: 39px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-weight: 600; outline: none; }
    .auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .auth-error { margin: 0; padding: 8px 10px; border: 1px solid #edc4bd; border-radius: 5px; color: var(--danger); background: var(--danger-soft); font-size: 10px; }
    .auth-actions { display: flex; justify-content: flex-end; gap: 8px; }
    .auth-actions button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
    .auth-actions .primary { border-color: var(--accent); color: #fff; background: var(--accent); }
    .auth-actions button:disabled { cursor: wait; opacity: .55; }
    .auth-note { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

    .context-ribbon {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--muted);
      background: var(--paper);
      font-size: 9px;
    }
    .context-ribbon b { color: var(--ink); }
    .context-ribbon .arrow { color: #a3aba8; }
    .context-ribbon .context-level {
      padding: 3px 6px;
      border-radius: 3px;
      color: var(--accent);
      background: var(--accent-soft);
      font-weight: 900;
    }

    .content { padding: 20px 24px 36px; }
    .source-line {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 13px;
      color: var(--muted);
      font-size: 10px;
    }
    .source-line strong { color: var(--ink); }
    .source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

    .brief-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      min-height: 112px;
      padding: 19px 22px;
      border-left: 5px solid var(--accent);
      border-radius: 6px;
      color: var(--hero-ink);
      background: var(--hero);
      box-shadow: var(--shadow);
    }
    .brief-kicker { margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 800; }
    .brief-band h2 { margin: 0; font-size: 20px; line-height: 1.45; }
    .brief-band p { margin: 4px 0 0; color: var(--hero-muted); font-size: 11px; }
    .brief-actions { display: flex; gap: 8px; }
    .brief-stat {
      min-width: 86px;
      padding: 8px 12px;
      border-left: 1px solid var(--hero-border);
    }
    .brief-stat b, .brief-stat span { display: block; }
    .brief-stat b { font-size: 21px; line-height: 1.15; }
    .brief-stat span { margin-top: 4px; color: var(--hero-muted); font-size: 9px; }
    .brief-stat.danger b { color: var(--danger); }

    .metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 14px 0;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
    }
    .metric { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
    .metric:last-child { border-right: 0; }
    .metric span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
    .metric strong { display: block; overflow: hidden; margin-top: 3px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .metric small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
    .metric .up { color: var(--accent); }
    .metric .risk { color: var(--danger); }

    .work-status-overview { margin: 0 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
    .work-status-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; padding: 6px 12px 3px; }
    .work-status-head h3 { margin: 0; font-size: 12px; line-height: 16px; }
    .work-status-head p { margin: 0; color: var(--muted); font-size: 8px; line-height: 11px; }
    .ceo-work-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; }
    .ceo-work-filters label { display:flex; gap:5px; align-items:center; color:var(--muted); font-size:11px; }
    .ceo-work-filters select { max-width:210px; min-height:30px; border:1px solid var(--line); border-radius:4px; background:var(--surface, #fff); color:var(--ink); padding:3px 6px; }
    .ceo-workflow-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; min-width:0; padding:7px 0; }
    .ceo-workflow-toolbar .ceo-work-filters { margin:0; gap:5px; }
    .ceo-workflow-toolbar .ceo-work-filters select { width:110px; min-height:28px; font-size:11px; }
    .ceo-workflow-toolbar .ceo-work-filters [data-workflow-period] { width:130px; }
    .ceo-workflow-toolbar .ws-filter-bar { padding:0; gap:4px; }
    .ceo-workflow-toolbar .ws-filter-bar button { min-height:28px; padding:3px 6px; font-size:10px; white-space:nowrap; }
    .ceo-work-info { position:relative; flex:none; }
    .ceo-work-info > summary { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--line); border-radius:4px; color:var(--muted); cursor:pointer; list-style:none; }
    .ceo-work-info > summary::-webkit-details-marker { display:none; }
    .ceo-work-info > summary:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
    .ceo-work-info-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:8; width:min(420px,calc(100vw - 32px)); max-height:65vh; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:6px; background:var(--paper); box-shadow:0 6px 20px rgb(0 0 0 / 10%); }
    .ceo-work-info-panel .ws-coverage { margin:0; padding:4px 0; }
    .ceo-workflow-notice { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 7px; font-size:11px; color:var(--muted); }
    .ceo-workflow-notice progress { width:80px; height:3px; accent-color:var(--accent); }
    #workflow-topbar-tools { display:flex; align-items:center; flex:1; min-width:0; gap:6px; }
    #workflow-topbar-tools[hidden] { display:none; }
    #workflow-topbar-tools .ceo-workflow-toolbar { flex:1; padding:0; }
    body[data-active-view="workflows"] .topbar { gap:8px 12px; flex-wrap:wrap; }
    body[data-active-view="workflows"] .context-title { flex:none; }
    body[data-active-view="workflows"] .context-title h1 { font-size:13px; }
    body[data-active-view="workflows"] .top-actions { flex:none; }
    body[data-active-view="workflows"] .source-line { display:none; }
    .workflow-overview-panel { padding:10px; }
    .workflow-overview-panel .ws-overview-list { max-height:none; overflow:visible; }
    .workflow-overview-panel[data-card-code]::after { top:-10px; }
    @media (max-width:1100px) {
      body[data-active-view="workflows"] #workflow-topbar-tools { order:3; flex-basis:100%; }
      body[data-active-view="workflows"] .top-actions { margin-left:auto; }
    }
    .ceo-people { margin:10px 0; font-size:11px; }
    .ceo-people summary { cursor:pointer; color:var(--muted); }
    .ceo-people-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:1px 12px; margin-top:7px; }
    .ceo-person { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); color:var(--muted); }
    .ceo-person strong { color:var(--ink); overflow-wrap:anywhere; }
    .ceo-record-scope { margin:0; padding:3px 6px 5px; font-size:9px; color:var(--muted); overflow-wrap:anywhere; }
    .ceo-workflow-detail { grid-column:1 / -1; min-width:0; }
    body[data-active-view="brief"] .context-path, body[data-active-view="brief"] .context-ribbon,
    body[data-active-view="brief"] .source-line,
    body[data-active-view="brief"] .top-actions .select-field,
    body[data-active-view="workflows"] .context-path, body[data-active-view="workflows"] .context-ribbon,
    body[data-active-view="workflows"] .top-actions .select-field { display:none; }
    .work-status-stats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .work-status-stat { min-width: 0; padding: 3px 12px 6px; border-right: 1px solid var(--line); }
    .work-status-stat:last-child { border-right: 0; }
    .work-status-stat b, .work-status-stat span { display: block; }
    .work-status-stat b { font-size: 15px; line-height: 18px; font-variant-numeric: tabular-nums; }
    .work-status-stat span { color: var(--muted); font-size: 8px; line-height: 11px; }
    .work-status-stat.is-risk b { color: var(--danger); }
    .work-status-stat.is-watch b { color: var(--amber); }
    .work-status-stat.is-good b { color: var(--accent); }
    .work-status-stat.is-unknown b { color: var(--muted); }
    .work-status-note { margin: 0; padding: 0 12px 5px; color: var(--muted); font-size: 8px; line-height: 11px; }

    .daily-board { margin-bottom: 14px; }
    .daily-route-list { padding: 2px 14px 9px; }
    .daily-route {
      display: grid;
      grid-template-columns: minmax(125px, .9fr) minmax(0, 2.5fr) 108px;
      gap: 12px;
      align-items: center;
      min-height: 82px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }
    .daily-route:last-child { border-bottom: 0; }
    .daily-route.work-route { grid-template-columns: minmax(120px, .8fr) minmax(0, 2.5fr) 108px; }
    .work-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
    .work-step { min-width: 0; padding-left: 10px; border-left: 2px solid var(--line); }
    .work-step b, .work-step strong, .work-step small { display: block; overflow-wrap: anywhere; }
    .work-step b { color: var(--muted); font-size: 8px; }
    .work-step strong { margin-top: 2px; font-size: 10px; }
    .work-step small { margin-top: 2px; color: var(--muted); font-size: 9px; }
    button.work-step { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
    button.work-step:hover { border-left-color: var(--accent); background: var(--surface-subtle); }
    .route-project { min-width: 0; }
    .route-project strong, .route-project span { display: block; }
    .route-project strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .route-project span { margin-top: 3px; color: var(--muted); font-size: 9px; }
    .route-track {
      position: relative;
      display: grid;
      grid-template-columns: 45px minmax(44px, 1fr) minmax(104px, 1.35fr) 24px minmax(104px, 1.35fr) minmax(44px, 1fr) 52px;
      gap: 5px;
      align-items: center;
      min-width: 0;
    }
    .route-track::before {
      position: absolute;
      left: 21px;
      right: 25px;
      top: 22px;
      z-index: 0;
      height: 3px;
      background: #dfe5e2;
      content: "";
    }
    .route-start, .route-target { position: relative; z-index: 1; text-align: center; }
    .route-dot {
      display: block;
      width: 13px;
      height: 13px;
      margin: 0 auto 3px;
      border: 3px solid var(--paper);
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 2px var(--accent);
    }
    .route-target .route-dot { background: var(--paper); }
    .route-start b, .route-target b { display: block; font-size: 8px; }
    .route-start small, .route-target small { display: block; color: var(--muted); font-size: 7px; white-space: nowrap; }
    .route-dots { position: relative; z-index: 1; display: flex; gap: 3px; justify-content: center; }
    .route-dots i { width: 4px; height: 4px; border-radius: 50%; background: #b9c5c0; }
    .route-dots i.done { background: var(--accent); }
    .route-box {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 48px;
      padding: 7px 8px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      background: var(--paper);
      text-align: left;
    }
    button.route-box { width: 100%; color: var(--ink); cursor: pointer; }
    button.route-box:hover { border-color: var(--accent); background: #fbfdfc; }
    .route-box span, .route-box strong, .route-box small { display: block; }
    .route-box span { color: var(--muted); font-size: 7px; font-weight: 800; }
    .route-box strong { overflow: hidden; margin-top: 1px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .route-box small { margin-top: 2px; color: var(--accent); font-size: 7px; }
    .route-arrow { position: relative; z-index: 1; height: 16px; background: #cce9d8; clip-path: polygon(0 25%, 68% 25%, 68% 0, 100% 50%, 68% 100%, 68% 75%, 0 75%); }
    .route-action { text-align: right; }
    .route-action button {
      display: inline-flex;
      min-height: 27px;
      align-items: center;
      gap: 4px;
      padding: 0 7px;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      color: var(--blue);
      background: var(--paper);
      font-size: 8px;
      font-weight: 900;
    }

    .main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 14px; align-items: start; }
    .panel {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      box-shadow: 0 2px 8px rgba(21,37,31,.025);
    }
    .panel + .panel { margin-top: 14px; }
    .panel-head {
      display: flex;
      min-height: 52px;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 15px;
      border-bottom: 1px solid var(--line);
    }
    .panel-title { min-width: 0; }
    .panel-title h3 { margin: 0; font-size: 13px; }
    .panel-title p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
    .text-button, .icon-button {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      color: var(--ink);
      background: var(--paper);
      font-size: 10px;
      font-weight: 800;
    }
    .text-button { padding: 0 9px; }
    .icon-button { width: 31px; padding: 0; }
    .icon-button .icon { width: 15px; }
    .text-button:hover, .icon-button:hover { border-color: var(--accent); color: var(--accent); }

    .project-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .project-table th {
      padding: 8px 12px;
      color: var(--muted);
      background: #f7f9f8;
      font-size: 9px;
      text-align: left;
    }
    .project-table th:nth-child(1) { width: 30%; }
    .project-table th:nth-child(2) { width: 31%; }
    .project-table th:nth-child(3) { width: 29%; }
    .project-table th:nth-child(4) { width: 10%; text-align: right; }
    .project-row { cursor: pointer; }
    .project-row:hover { background: #fbfcfb; }
    .project-row td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
    .project-table tbody tr:first-child td { border-top: 0; }
    .project-name { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
    .project-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 5px;
      color: var(--accent);
      background: var(--accent-soft);
    }
    .project-icon .icon { width: 14px; }
    .project-name strong, .project-name span { display: block; }
    .project-name strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .project-name span { margin-top: 1px; color: var(--muted); font-size: 9px; }
    .progress-line { display: grid; grid-template-columns: minmax(70px, 1fr) 34px; gap: 8px; align-items: center; }
    .progress-track { position: relative; height: 8px; overflow: hidden; border-radius: 3px; background: var(--line); }
    .progress-track i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--accent); }
    .progress-line b { font-size: 10px; font-variant-numeric: tabular-nums; }
    .progress-line.is-unknown .progress-track::after {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--muted) 15%, transparent) 5px 7px);
      content: "";
    }
    .progress-line.is-unknown b { color: var(--muted); }
    .project-progress-cell small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
    .update strong, .update span { display: block; }
    .update strong { font-size: 10px; }
    .update span { margin-top: 2px; color: var(--muted); font-size: 9px; }
    .status {
      display: inline-flex;
      min-height: 22px;
      align-items: center;
      gap: 4px;
      padding: 0 7px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }
    .status.good { color: var(--accent); background: var(--accent-soft); }
    .status.warn { color: var(--amber); background: var(--amber-soft); }
    .status.risk { color: var(--danger); background: var(--danger-soft); }
    .status.info { color: var(--blue); background: var(--blue-soft); }
    .status.neutral { color: var(--muted); background: var(--soft); }
    .project-status-cell { text-align: right; }
    .project-status-cell .status { justify-content: center; }
    .project-work-copy span { display: block; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
    .project-work-copy strong { display: block; font-size: 10px; overflow-wrap: anywhere; }
    .project-work-copy span { margin-top: 3px; }
    .project-change-cell .ws-project-signals { margin-top: 5px; }
    .project-work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }
    .project-work-grid > div { min-width: 0; }
    .project-work-grid small, .project-work-grid strong { display: block; overflow-wrap: anywhere; }
    .project-work-grid small { color: var(--muted); font-size: 8px; }
    .project-work-grid strong { margin-top: 3px; font-size: 10px; }
    .project-work-grid span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
    .route-project .status { margin-top: 5px; }

    body[data-active-view="projects"] { overflow: hidden; }
    body[data-active-view="projects"] .app-shell { height: 100vh; min-height: 0; }
    body[data-active-view="projects"] .workspace { display: flex; min-height: 0; height: 100vh; flex-direction: column; overflow: hidden; }
    body[data-active-view="projects"] .topbar { position: relative; min-height: 58px; flex: 0 0 auto; }
    body[data-active-view="projects"] .context-ribbon,
    body[data-active-view="projects"] .source-line,
    body[data-active-view="projects"] .top-actions .select-field:has(#meeting-select) { display: none; }
    body[data-active-view="projects"] .content { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; padding: 10px 14px 12px; }
    body[data-active-view="projects"] #projects-view { min-height: 0; flex: 1 1 auto; }
    .project-gantt-panel { display: flex; width: 100%; min-height: 0; flex-direction: column; }
    .project-gantt-panel .view-toolbar { min-height: 50px; flex: 0 0 auto; padding: 8px 12px; }
    .project-gantt-summary { color: var(--muted); font-size: 9px; font-weight: 750; }
    .project-gantt-summary b { color: var(--ink); }
    .project-gantt-viewport { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; }
    .project-gantt-canvas { min-width: 760px; }
    .project-gantt-axis,
    .project-gantt-row {
      display: grid;
      grid-template-columns: minmax(230px, 29%) minmax(420px, 1fr) 102px;
      align-items: center;
    }
    .project-gantt-axis {
      position: sticky;
      top: 0;
      z-index: 2;
      min-height: 34px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      background: var(--surface-subtle);
      font-size: 9px;
      font-weight: 850;
    }
    .project-gantt-axis > span:first-child { padding-left: 12px; }
    .project-gantt-axis > span:last-child { padding-right: 12px; text-align: right; }
    .project-gantt-ticks { display: flex; justify-content: space-between; padding: 0 7px; }
    .project-gantt-row {
      width: 100%;
      min-height: 46px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      background: var(--paper);
      text-align: left;
    }
    .project-gantt-row:hover,
    .project-gantt-row:focus-visible { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); outline: none; }
    .project-gantt-project { display: block; min-width: 0; padding: 6px 10px 6px 12px; }
    .project-gantt-project strong { display: block; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .project-gantt-project small { display: flex; min-width: 0; gap: 7px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 8px; font-weight: 700; white-space: nowrap; }
    .project-gantt-project small span { overflow: hidden; text-overflow: ellipsis; }
    .project-gantt-timeline {
      position: relative;
      display: block;
      height: 29px;
      overflow: hidden;
      border-right: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
      border-left: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background-image: linear-gradient(90deg, color-mix(in srgb, var(--line) 48%, transparent) 1px, transparent 1px);
      background-size: 20% 100%;
    }
    .project-gantt-today { position: absolute; z-index: 2; top: 0; bottom: 0; width: 1px; background: var(--danger); opacity: .85; }
    .project-gantt-bar {
      position: absolute;
      z-index: 1;
      top: 6px;
      height: 17px;
      min-width: 5px;
      overflow: hidden;
      border-radius: 4px;
      background: color-mix(in srgb, var(--accent) 22%, var(--paper));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .project-gantt-bar > i { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .94; }
    .project-gantt-bar > em { position: relative; z-index: 1; display: block; overflow: hidden; padding: 0 5px; color: #fff; font-size: 8px; font-style: normal; font-weight: 850; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / 24%); }
    .project-gantt-pending { position: absolute; inset: 6px 7px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 4px; color: var(--muted); font-size: 8px; font-weight: 850; }
    .project-gantt-status { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding-right: 10px; }
    .project-gantt-status .status { min-height: 20px; }
    .project-gantt-status .icon { width: 13px; height: 13px; color: var(--muted); }
    .project-gantt-legend { display: flex; min-height: 30px; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 12px; padding: 5px 12px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-subtle); font-size: 8px; font-weight: 750; }
    .project-gantt-legend span { display: inline-flex; align-items: center; gap: 4px; }
    .project-gantt-legend i { display: inline-block; width: 12px; height: 5px; border-radius: 2px; background: var(--accent); }
    .project-gantt-legend i.plan { background: color-mix(in srgb, var(--accent) 24%, var(--paper)); }
    .project-gantt-legend i.today { width: 2px; height: 10px; background: var(--danger); }
    .project-gantt-empty { padding: 42px 18px; color: var(--muted); text-align: center; font-size: 11px; font-weight: 750; }

    .timeline { padding: 5px 15px 12px; }
    .timeline-item {
      display: grid;
      grid-template-columns: 64px 18px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
      min-height: 52px;
      padding: 9px 0;
      border-bottom: 1px solid #edf0ee;
    }
    .timeline-item:last-child { border-bottom: 0; }
    .timeline-time { color: var(--muted); font-size: 9px; font-weight: 800; }
    .timeline-node { position: relative; display: flex; justify-content: center; min-height: 34px; }
    .timeline-node::before { position: absolute; top: 14px; bottom: -29px; width: 1px; background: var(--line); content: ""; }
    .timeline-item:last-child .timeline-node::before { display: none; }
    .timeline-node i { z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .timeline-copy strong { display: block; font-size: 10px; }
    .timeline-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
    .evidence { color: var(--blue); font-size: 9px; font-weight: 800; white-space: nowrap; }

    .decision-list { padding: 5px 14px 9px; }
    .decision-item {
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr);
      gap: 9px;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
    }
    .decision-item:last-child { border-bottom: 0; }
    .decision-symbol {
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border-radius: 5px;
      color: var(--danger);
      background: var(--danger-soft);
      font-size: 11px;
      font-weight: 900;
    }
    .decision-item.watch .decision-symbol { color: var(--amber); background: var(--amber-soft); }
    .decision-copy strong { display: block; font-size: 11px; }
    .decision-copy p { margin: 2px 0 7px; color: var(--muted); font-size: 9px; }
    .decision-actions { display: flex; gap: 6px; }
    .decision-actions button {
      min-height: 25px;
      padding: 0 8px;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      color: var(--ink);
      background: var(--paper);
      font-size: 9px;
      font-weight: 800;
    }
    .decision-actions button.primary { border-color: var(--accent); color: #fff; background: var(--accent); }

    .agent-panel { border-top: 3px solid var(--blue); }
    .agent-status { display: flex; align-items: center; gap: 5px; color: var(--accent); font-size: 9px; font-weight: 800; }
    .agent-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .agent-body { padding: 13px 14px 14px; }
    .agent-context {
      padding: 9px 10px;
      border-left: 3px solid var(--blue);
      color: var(--muted);
      background: var(--blue-soft);
      font-size: 9px;
    }
    .agent-context strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 10px; }
    .prompt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
    .prompt-chip {
      min-height: 27px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 4px;
      color: var(--muted);
      background: #f8faf9;
      font-size: 9px;
      font-weight: 700;
    }
    .prompt-chip:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
    .agent-input { position: relative; }
    .agent-input textarea {
      display: block;
      width: 100%;
      height: 72px;
      resize: none;
      padding: 9px 39px 9px 10px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      color: var(--ink);
      background: var(--paper);
      font-size: 10px;
    }
    .agent-send {
      position: absolute;
      right: 7px;
      bottom: 7px;
      display: grid;
      width: 27px;
      height: 27px;
      place-items: center;
      border: 0;
      border-radius: 4px;
      color: #fff;
      background: var(--blue);
    }
    .agent-send .icon { width: 14px; }
    .agent-answer {
      margin-top: 9px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: #fafbfa;
      font-size: 9px;
    }
    .agent-answer strong { display: block; margin-bottom: 3px; font-size: 10px; }

    .agent-workbench { min-width: 0; }
    .agent-workbench-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
    .agent-workbench-layout.has-architecture-drawer { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
    .agent-workbench-main { display: grid; gap: 14px; min-width: 0; container: agent-main / inline-size; }
    .agent-config-shell { min-width: 0; }
    .agent-company-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 15px;
      border-bottom: 1px solid var(--line);
      background: var(--surface-subtle);
    }
    .agent-config-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .agent-config-status {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      padding: 0 8px;
      border: 1px solid var(--line);
      color: var(--amber);
      background: var(--amber-soft);
      font-size: 8px;
      font-weight: 900;
      white-space: nowrap;
    }
    .agent-company-switcher {
      display: flex;
      min-width: 0;
      flex: 1;
      gap: 6px;
      overflow-x: auto;
    }
    .agent-company-tab {
      display: inline-flex;
      min-height: 30px;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      color: var(--muted);
      background: var(--paper);
      font-size: 9px;
      font-weight: 900;
    }
    .agent-company-tab:hover, .agent-company-tab[aria-selected="true"] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
    .agent-company-tab i { width: 9px; height: 9px; border-radius: 50%; background: var(--company-color, var(--accent)); }
    .agent-architecture-trigger { flex: 0 0 auto; }
    .agent-company-employee-strip {
      display: grid;
      gap: 7px;
      padding: 9px 15px 10px;
      border-bottom: 1px solid var(--line);
      background: var(--surface-subtle);
    }
    .agent-company-employee-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .agent-company-employee-strip-head strong { font-size: 9px; }
    .agent-company-employee-strip-head span { color: var(--muted); font-size: 8px; }
    .agent-company-employee-strip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .agent-company-employee-chip {
      display: flex;
      min-width: 0;
      align-items: center;
      gap: 7px;
      min-height: 37px;
      padding: 5px 7px;
      border: 1px solid var(--line);
      color: var(--ink);
      background: var(--paper);
      text-align: left;
    }
    .agent-company-employee-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
    .agent-company-employee-avatar { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 9px; font-weight: 900; }
    .agent-company-employee-chip-copy { min-width: 0; }
    .agent-company-employee-chip-copy strong, .agent-company-employee-chip-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-company-employee-chip-copy strong { font-size: 9px; }
    .agent-company-employee-chip-copy span { margin-top: 2px; color: var(--muted); font-size: 7px; }
    .agent-company-employee-empty { padding: 7px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 8px; }
    .agent-section-switcher {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding: 10px 15px;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }
    .agent-section-option {
      display: flex;
      min-height: 40px;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      color: var(--muted);
      background: var(--surface-subtle);
      font-size: 10px;
      font-weight: 900;
    }
    .agent-section-option:hover, .agent-section-option[aria-selected="true"] {
      border-color: var(--accent);
      color: var(--ink);
      background: var(--accent-soft);
    }
    .agent-section-option .icon { width: 15px; height: 15px; }
    .agent-config-content { min-width: 0; padding: 15px; }
    .agent-section-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 13px;
      padding: 9px 10px;
      border-left: 3px solid var(--blue);
      color: var(--muted);
      background: var(--blue-soft);
      font-size: 9px;
      line-height: 1.55;
    }
    .agent-section-note .icon { width: 14px; height: 14px; color: var(--blue); }
    .agent-section-note strong { color: var(--ink); }
    .agent-flow-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 13px;
    }
    .agent-flow-step {
      position: relative;
      min-height: 54px;
      padding: 8px 9px;
      border: 1px solid var(--line);
      background: var(--surface-subtle);
    }
    .agent-flow-step:not(:last-child)::after {
      position: absolute;
      top: 23px;
      right: -8px;
      z-index: 1;
      color: var(--muted);
      content: '→';
      font-size: 11px;
      font-weight: 900;
    }
    .agent-flow-step b, .agent-flow-step span { display: block; }
    .agent-flow-step b { color: var(--accent); font-size: 9px; }
    .agent-flow-step span { margin-top: 3px; color: var(--muted); font-size: 8px; }
    .agent-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 13px; }
    .agent-summary-item { padding: 9px 10px; border: 1px solid var(--line); background: var(--paper); }
    .agent-summary-item b, .agent-summary-item span { display: block; }
    .agent-summary-item b { font-size: 15px; }
    .agent-summary-item span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .agent-map { margin-bottom: 13px; border: 1px solid var(--line); background: var(--paper); }
    .agent-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
    .agent-map-head strong { font-size: 10px; }
    .agent-map-head span { color: var(--muted); font-size: 8px; }
    .agent-map-root { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
    .agent-map-root .icon { color: var(--accent); }
    .agent-map-root strong { font-size: 11px; }
    .agent-map-root span { color: var(--muted); font-size: 8px; }
    .agent-map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 10px; }
    .agent-map-branch { min-width: 0; padding: 8px; border-left: 2px solid var(--accent); background: var(--surface-subtle); }
    .agent-map-branch strong, .agent-map-branch span { display: block; }
    .agent-map-branch strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .agent-map-branch span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .agent-map-branch small { display: block; margin-top: 6px; color: var(--blue); font-size: 8px; line-height: 1.45; }
    .agent-architecture-drawer {
      position: sticky;
      top: 14px;
      min-width: 0;
      max-height: calc(100dvh - 28px);
      overflow-y: auto;
      border: 1px solid var(--line);
      background: var(--paper);
      box-shadow: -5px 8px 22px rgba(37, 54, 47, .08);
    }
    .agent-architecture-drawer[data-card-code] > .agent-architecture-head { padding-right: 46px; }
    .agent-architecture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 13px 11px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
    .agent-architecture-kicker { display: block; color: var(--accent); font-size: 8px; font-weight: 900; }
    .agent-architecture-head h3 { margin: 2px 0 0; font-size: 14px; }
    .agent-architecture-head p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
    .agent-architecture-body { padding: 12px; }
    .agent-architecture-note { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 11px; padding: 8px; border-left: 3px solid var(--blue); color: var(--muted); background: var(--blue-soft); font-size: 8px; line-height: 1.55; }
    .agent-architecture-note .icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--blue); }
    .agent-architecture-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
    .agent-architecture-summary-item { min-width: 0; padding: 7px; border: 1px solid var(--line); background: var(--surface-subtle); }
    .agent-architecture-summary-item b, .agent-architecture-summary-item span { display: block; }
    .agent-architecture-summary-item b { font-size: 14px; }
    .agent-architecture-summary-item span { margin-top: 1px; color: var(--muted); font-size: 7px; }
    .agent-architecture-flow { display: grid; justify-items: stretch; }
    .agent-architecture-node { min-width: 0; padding: 8px; border: 1px solid var(--line-strong); background: var(--surface-subtle); }
    .agent-architecture-root { border-color: var(--accent); background: var(--accent-soft); }
    .agent-architecture-node-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
    .agent-architecture-node-title { display: flex; min-width: 0; align-items: center; gap: 6px; }
    .agent-architecture-node-title .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
    .agent-architecture-node strong { min-width: 0; overflow-wrap: anywhere; font-size: 10px; }
    .agent-architecture-node small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
    .agent-architecture-connector { width: 1px; height: 13px; margin: 0 auto; background: var(--line-strong); }
    .agent-architecture-departments { display: grid; gap: 10px; }
    .agent-architecture-department { position: relative; min-width: 0; padding-left: 13px; }
    .agent-architecture-department::before { position: absolute; top: 18px; bottom: 18px; left: 4px; border-left: 1px solid var(--line-strong); content: ''; }
    .agent-architecture-department::after { position: absolute; top: 18px; left: 4px; width: 9px; border-top: 1px solid var(--line-strong); content: ''; }
    .agent-architecture-department > .agent-architecture-node { position: relative; }
    .agent-architecture-department-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
    .agent-architecture-department-head span { color: var(--muted); font-size: 7px; white-space: nowrap; }
    .agent-architecture-positions { display: grid; gap: 6px; margin: 6px 0 0 11px; }
    .agent-architecture-position { min-width: 0; padding: 7px 8px; border-left: 2px solid var(--blue); background: var(--paper); }
    .agent-architecture-position-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
    .agent-architecture-position-head strong { font-size: 9px; }
    .agent-architecture-position-meta { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
    .agent-architecture-chip { display: inline-flex; min-width: 0; align-items: center; padding: 2px 4px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-subtle); font-size: 7px; line-height: 1.3; }
    .agent-architecture-chip.is-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .agent-architecture-empty { padding: 10px; border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; font-size: 8px; }
    .agent-architecture-footer { margin-top: 10px; color: var(--muted); font-size: 8px; line-height: 1.55; }
    .agent-section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
    .agent-section-toolbar strong { font-size: 11px; }
    .agent-section-toolbar span { color: var(--muted); font-size: 8px; }
    .agent-blueprint-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
    .agent-blueprint-table { width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed; }
    .agent-blueprint-table th, .agent-blueprint-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
    .agent-blueprint-table th { color: var(--muted); background: var(--surface-subtle); font-size: 8px; }
    .agent-blueprint-table th:nth-child(1) { width: 22%; }
    .agent-blueprint-table th:nth-child(2) { width: 25%; }
    .agent-blueprint-table th:nth-child(3) { width: 30%; }
    .agent-blueprint-table th:nth-child(4) { width: 17%; }
    .agent-blueprint-table th:nth-child(5) { width: 6%; }
    .agent-blueprint-table tr:last-child td { border-bottom: 0; }
    .agent-field, .agent-field textarea, .agent-field select, .agent-field input { width: 100%; }
    .agent-field input, .agent-field textarea, .agent-field select, .agent-inline-input {
      min-height: 29px;
      padding: 5px 7px;
      border: 1px solid var(--line-strong);
      border-radius: 3px;
      color: var(--ink);
      background: var(--paper);
      font-size: 9px;
    }
    .agent-field textarea { min-height: 52px; resize: vertical; line-height: 1.45; }
    .agent-field input:focus, .agent-field textarea:focus, .agent-field select:focus, .agent-inline-input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
    .agent-field-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
    .agent-board-checks { display: flex; flex-wrap: wrap; gap: 4px; }
    .agent-check { display: inline-flex; min-height: 22px; align-items: center; gap: 4px; padding: 0 5px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-subtle); font-size: 8px; }
    .agent-check:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .agent-check input { width: 12px; height: 12px; margin: 0; accent-color: var(--accent); }
    .agent-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
    .agent-row-actions .icon-button { width: 27px; min-height: 27px; }
    .agent-employee-list, .agent-board-list, .agent-tool-list { display: grid; gap: 8px; }
    .agent-employee-row, .agent-list-row { border: 1px solid var(--line); background: var(--paper); }
    .agent-employee-row:not(.is-expanded) .agent-assignment-list,
    .agent-employee-row:not(.is-expanded) .agent-match-block,
    .agent-employee-row:not(.is-expanded) .agent-note-row,
    .agent-list-row:not(.is-expanded) .agent-list-row-body { display: none; }
    .agent-employee-head, .agent-list-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
    .agent-employee-row:not(.is-expanded) .agent-employee-head,
    .agent-list-row:not(.is-expanded) .agent-list-row-head { border-bottom: 0; }
    .agent-employee-head-main { display: flex; min-width: 0; align-items: center; gap: 7px; }
    .agent-employee-head-main .agent-inline-input { max-width: 150px; font-weight: 900; }
    .agent-employee-head span, .agent-list-row-head span { color: var(--muted); font-size: 8px; }
    .agent-expand-button { flex: 0 0 auto; }
    .agent-expand-button .icon { width: 13px; height: 13px; }
    .agent-assignment-list { display: grid; gap: 5px; padding: 9px 10px; }
    .agent-assignment { display: grid; grid-template-columns: 120px 150px minmax(0, 1fr) 28px; gap: 5px; align-items: center; }
    .agent-assignment.is-focus { padding-left: 5px; border-left: 2px solid var(--accent); background: var(--accent-soft); }
    .agent-assignment .agent-inline-input, .agent-assignment select { min-width: 0; width: 100%; height: 29px; }
    .agent-assignment .icon-button { min-height: 27px; }
    .agent-match-block { padding: 9px 10px 10px; border-top: 1px solid var(--line); }
    .agent-match-block > strong { display: block; margin-bottom: 6px; font-size: 9px; }
    .agent-variant-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: 8px; }
    .agent-variant-row select { min-height: 27px; padding: 4px 6px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--paper); font-size: 8px; }
    .agent-note-row { padding: 0 10px 10px; }
    .agent-note-row input { max-width: 100%; }
    .agent-list-row-body { display: grid; grid-template-columns: 155px 125px minmax(0, 1fr) 150px 28px; gap: 7px; align-items: start; padding: 9px 10px; }
    .agent-list-row-body.position-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agent-list-row-body.position-body .position-description { grid-column: span 2; }
    .agent-list-row-body.position-body .position-boards { grid-column: 1 / -1; }
    .agent-list-row-body.position-body .agent-row-actions { grid-column: 1 / -1; }
    .agent-list-row-body.tool-body { grid-template-columns: 155px 100px minmax(0, 1fr) minmax(180px, 1fr) 28px; }
    .agent-list-row-body .agent-field textarea { min-height: 44px; }
    .agent-list-row-body .agent-field .agent-board-checks { min-height: 29px; align-content: flex-start; }
    .agent-config-footnote { margin-top: 10px; color: var(--muted); font-size: 8px; line-height: 1.6; }
    .agent-home-designer { margin-bottom: 14px; border: 1px solid var(--line-strong); background: var(--paper); }
    .agent-home-designer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
    .agent-home-designer-head strong, .agent-home-designer-head span { display: block; }
    .agent-home-designer-head strong { font-size: 11px; }
    .agent-home-designer-head span { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.45; }
    .agent-home-persona-select { min-width: 220px; }
    .agent-home-persona-select select { width: 100%; min-height: 30px; padding: 5px 7px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--paper); font-size: 9px; font-weight: 800; }
    .agent-home-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
    .agent-home-persona > strong { margin-right: 3px; font-size: 9px; }
    .agent-home-canvas { padding: 11px 12px 12px; }
    .agent-home-canvas-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .agent-home-canvas-head strong, .agent-home-canvas-head span { display: block; }
    .agent-home-canvas-head strong { font-size: 10px; }
    .agent-home-canvas-head span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .agent-home-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .agent-home-board-card { min-width: 0; padding: 8px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface-subtle); }
    .agent-home-board-card-head { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 6px; }
    .agent-home-board-icon { display: grid; width: 25px; height: 25px; place-items: center; color: var(--accent); background: var(--accent-soft); }
    .agent-home-board-icon .icon { width: 13px; height: 13px; }
    .agent-home-board-copy { min-width: 0; }
    .agent-home-board-copy strong, .agent-home-board-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-home-board-copy strong { font-size: 8px; }
    .agent-home-board-copy span { margin-top: 2px; color: var(--muted); font-size: 7px; }
    .agent-home-board-card p { min-height: 29px; margin: 7px 0 0; overflow: hidden; color: var(--muted); font-size: 7px; line-height: 1.45; }
    .agent-home-board-actions { display: flex; gap: 2px; }
    .agent-home-board-actions .icon-button { width: 22px; min-height: 22px; }
    .agent-home-board-actions .icon { width: 11px; height: 11px; }
    .agent-home-empty { padding: 16px; border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; font-size: 8px; }
    .agent-home-available { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
    .agent-home-available > strong { color: var(--muted); font-size: 8px; }
    .agent-home-add-button { display: inline-flex; min-height: 23px; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); font-size: 8px; font-weight: 800; }
    .agent-home-add-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .agent-home-add-button .icon { width: 11px; height: 11px; }
    .agent-board-taxonomy { margin-top: 14px; }
    .agent-board-filter-panel { display: grid; gap: 7px; margin-bottom: 10px; padding: 9px; border: 1px solid var(--line); background: var(--surface-subtle); }
    .agent-board-filter-group { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 7px; }
    .agent-board-filter-group > strong { color: var(--muted); font-size: 8px; }
    .agent-board-filter-row { display: flex; flex-wrap: wrap; gap: 4px; }
    .agent-board-filter-button { min-height: 25px; padding: 0 8px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: 8px; font-weight: 850; }
    .agent-board-filter-button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .agent-board-category-list { display: grid; gap: 13px; }
    .agent-board-category-group { min-width: 0; }
    .agent-board-category-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
    .agent-board-category-head strong { font-size: 10px; }
    .agent-board-category-head span { color: var(--muted); font-size: 8px; }
    .agent-board-source-badge { display: inline-flex; min-height: 18px; align-items: center; padding: 0 5px; border: 1px solid var(--line); color: var(--blue); background: var(--blue-soft); font-size: 7px; font-weight: 850; }
    .agent-position-card-grid, .agent-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .agent-employee-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 7px; }
    @container agent-main (max-width: 900px) {
      .agent-employee-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @container agent-main (max-width: 660px) {
      .agent-company-employee-strip-list, .agent-position-card-grid, .agent-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .agent-employee-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .agent-home-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .agent-home-designer-head { align-items: stretch; flex-direction: column; }
      .agent-home-persona-select { min-width: 0; }
    }
    @container agent-main (max-width: 430px) {
      .agent-company-employee-strip-list, .agent-position-card-grid, .agent-preview-grid, .agent-employee-card-grid { grid-template-columns: 1fr; }
      .agent-home-board-grid { grid-template-columns: 1fr; }
      .agent-board-filter-group { grid-template-columns: 1fr; }
    }
    .agent-position-card, .agent-preview-card, .agent-employee-card { min-width: 0; border: 1px solid var(--line); background: var(--paper); }
    .agent-position-card .agent-list-row-head, .agent-preview-card .agent-list-row-head { min-height: 64px; }
    .agent-position-card .agent-list-row-head > div, .agent-preview-card .agent-list-row-head > div { min-width: 0; }
    .agent-position-card .agent-list-row-head strong, .agent-preview-card .agent-list-row-head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-preview-card .agent-list-row-head { align-items: center; }
    .agent-preview-surface { min-height: 132px; padding: 9px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
    .agent-preview-surface-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .02em; }
    .agent-preview-surface-label b { color: var(--blue); font-size: 7px; }
    .agent-preview-edit { padding: 9px 10px; }
    .agent-preview-card:not(.is-expanded) .agent-preview-edit { display: none; }
    .agent-preview-card.is-expanded .agent-preview-edit { display: grid; gap: 7px; }
    .agent-preview-card .agent-list-row-body { display: grid; grid-template-columns: 1fr; gap: 7px; }
    .agent-preview-card .agent-list-row-body .agent-row-actions { justify-content: flex-start; }
    .agent-position-card .agent-list-row-body { display: grid; grid-template-columns: 1fr; gap: 7px; }
    .agent-position-card .agent-list-row-body .position-description, .agent-position-card .agent-list-row-body .position-boards, .agent-position-card .agent-list-row-body .agent-row-actions { grid-column: auto; }
    .agent-preview-card .agent-position-meta { margin-top: 5px; }
    .agent-preview-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
    .agent-preview-chip { display: inline-flex; min-height: 18px; align-items: center; padding: 0 5px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: 7px; }
    .agent-preview-chip.is-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .agent-preview-metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .agent-preview-metric { min-width: 0; padding: 6px; border: 1px solid var(--line); background: var(--paper); }
    .agent-preview-metric b, .agent-preview-metric span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-preview-metric b { font-size: 12px; }
    .agent-preview-metric span { margin-top: 2px; color: var(--muted); font-size: 7px; }
    .agent-preview-line-list { display: grid; gap: 5px; }
    .agent-preview-line { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 5px; align-items: center; min-height: 18px; color: var(--muted); font-size: 7px; }
    .agent-preview-line i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .agent-preview-line i.warn { background: var(--amber); }
    .agent-preview-line i.danger { background: var(--danger); }
    .agent-preview-line strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
    .agent-preview-line em { color: var(--muted); font-style: normal; white-space: nowrap; }
    .agent-preview-progress { height: 5px; overflow: hidden; border-radius: 4px; background: var(--line); }
    .agent-preview-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
    .agent-preview-step-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
    .agent-preview-step { min-height: 25px; padding: 4px 3px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); text-align: center; font-size: 6px; }
    .agent-preview-step.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 900; }
    .agent-preview-doc { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px; border: 1px solid var(--line); background: var(--paper); }
    .agent-preview-doc-icon { display: grid; width: 24px; height: 28px; place-items: center; color: var(--blue); background: var(--blue-soft); }
    .agent-preview-doc-icon .icon { width: 13px; height: 13px; }
    .agent-preview-doc strong, .agent-preview-doc span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-preview-doc strong { font-size: 8px; }
    .agent-preview-doc span { margin-top: 3px; color: var(--muted); font-size: 7px; }
    .agent-preview-tool-input { display: flex; min-height: 27px; align-items: center; gap: 6px; padding: 0 7px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--paper); font-size: 7px; }
    .agent-preview-tool-input .icon { width: 12px; height: 12px; color: var(--blue); }
    .agent-preview-tool-actions { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
    .agent-preview-tool-action { min-height: 23px; padding: 0 7px; border: 0; color: #fff; background: var(--accent); font-size: 7px; font-weight: 900; }
    .agent-preview-tool-actions span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
    .agent-preview-result { margin-top: 7px; padding: 6px; border-left: 2px solid var(--blue); background: var(--blue-soft); }
    .agent-preview-result strong, .agent-preview-result span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-preview-result strong { color: var(--ink); font-size: 7px; }
    .agent-preview-result span { margin-top: 3px; color: var(--muted); font-size: 7px; }
    .agent-employee-card { container: employee-card / inline-size; padding: 7px; }
    .agent-employee-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .agent-employee-card-identity { display: flex; min-width: 0; align-items: center; gap: 6px; }
    .agent-employee-card-avatar { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 9px; font-weight: 900; }
    .agent-employee-card-identity strong, .agent-employee-card-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-employee-card-identity strong { font-size: 10px; }
    .agent-employee-card-identity span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .agent-employee-card-body { display: grid; gap: 4px; margin-top: 5px; }
    .agent-employee-card-body p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
    .agent-company-scope-chip {
      --company-ink: var(--accent);
      --company-line: var(--line-strong);
      --company-soft: var(--accent-soft);
      display: inline-flex;
      min-height: 18px;
      align-items: center;
      gap: 4px;
      padding: 0 5px;
      border: 1px solid var(--company-line);
      border-radius: 3px;
      color: var(--company-ink);
      background: var(--company-soft);
      font-size: 7px;
      font-weight: 900;
    }
    .agent-company-scope-chip::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ''; }
    .agent-company-scope-chip[data-company-key="tech"], .agent-employee-company-scope[data-company-key="tech"] { --company-ink: #385a74; --company-line: #9ab5c8; --company-soft: #dde9f1; }
    .agent-company-scope-chip[data-company-key="hk"], .agent-employee-company-scope[data-company-key="hk"] { --company-ink: #2f654b; --company-line: #91b89f; --company-soft: #dcebe2; }
    .agent-company-scope-chip[data-company-key="lab"], .agent-employee-company-scope[data-company-key="lab"] { --company-ink: #756343; --company-line: #c8bda7; --company-soft: #f1eee6; }
    .agent-employee-company-scopes { display: grid; gap: 8px; padding-top: 4px; }
    .agent-employee-company-scope { position: relative; display: block; min-width: 0; margin-top: 3px; padding: 9px 6px 5px; border: 1px solid var(--company-line, var(--line)); border-left: 3px solid var(--company-ink, var(--accent)); background: var(--company-soft, var(--surface-subtle)); }
    .agent-employee-scope-group { min-width: 0; }
    .agent-employee-company-scope { min-height: calc(var(--company-count, 1) * 20px + 4px); padding-right: 80px; }
    .agent-employee-company-scope.is-shared { border-color: var(--line-strong); border-left-color: var(--accent); background: var(--surface-subtle); }
    .agent-company-scope-stack { position: absolute; top: -9px; right: 6px; z-index: 1; display: grid; justify-items: end; gap: 2px; max-width: 72px; }
    .agent-company-scope-stack > .agent-company-scope-chip { max-width: 100%; min-height: 18px; line-height: 16px; overflow-wrap: anywhere; box-shadow: 0 0 0 1px var(--paper); }
    .agent-company-scope-chip::before { flex-shrink: 0; }
    .agent-employee-company-scope-head { display: block; min-width: 0; }
    .agent-employee-company-scope-role { display: block; min-width: 0; overflow: hidden; color: var(--company-ink, var(--muted)); text-overflow: ellipsis; white-space: nowrap; font-size: 7px; font-weight: 850; }
    .agent-employee-company-scope-details { display: grid; min-width: 0; grid-template-columns: 1fr; gap: 2px; }
    .agent-employee-company-scope-details > div { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
    .agent-employee-company-scope-details .agent-field-label { margin: 0; color: var(--company-ink, var(--muted)); }
    .agent-employee-scope-value { min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 7px; line-height: 1.4; }
    .agent-employee-scope-branches { display: grid; min-width: 0; gap: 0; padding-left: 7px; }
    .agent-employee-scope-branch { position: relative; display: grid; min-width: 0; grid-template-columns: max-content minmax(0, 1fr); column-gap: 5px; }
    .agent-employee-scope-connectors { display: flex; gap: 2px; align-self: stretch; }
    .agent-employee-scope-connector { width: 8px; min-height: 20px; align-self: stretch; border-left: 2px solid var(--company-ink, var(--accent)); border-bottom: 2px solid var(--company-ink, var(--accent)); border-bottom-left-radius: 3px; }
    .agent-employee-scope-branch .agent-employee-company-scope-details { align-self: end; margin-top: 5px; padding: 4px 5px; border-left: 2px solid var(--company-ink, var(--accent)); background: var(--company-soft, var(--surface-subtle)); }
    [data-agent-scope-branch][data-company-key="tech"], .agent-employee-scope-connector[data-company-key="tech"] { --company-ink: #385a74; --company-soft: #dde9f1; }
    [data-agent-scope-branch][data-company-key="hk"], .agent-employee-scope-connector[data-company-key="hk"] { --company-ink: #2f654b; --company-soft: #dcebe2; }
    [data-agent-scope-branch][data-company-key="lab"], .agent-employee-scope-connector[data-company-key="lab"] { --company-ink: #756343; --company-soft: #f1eee6; }
    html[data-color-mode="dark"] [data-agent-scope-branch][data-company-key="tech"], html[data-color-mode="dark"] .agent-employee-scope-connector[data-company-key="tech"] { --company-ink: #b5c9d7; --company-soft: #33414a; }
    html[data-color-mode="dark"] [data-agent-scope-branch][data-company-key="hk"], html[data-color-mode="dark"] .agent-employee-scope-connector[data-company-key="hk"] { --company-ink: #add0bc; --company-soft: #304139; }
    html[data-color-mode="dark"] [data-agent-scope-branch][data-company-key="lab"], html[data-color-mode="dark"] .agent-employee-scope-connector[data-company-key="lab"] { --company-ink: #d0c09f; --company-soft: #423d31; }
    @container employee-card (max-width: 280px) {
      .agent-employee-company-scope { padding-top: 9px; }
      .agent-employee-company-scope-details { grid-template-columns: 1fr; gap: 2px; }
    }
    html[data-color-mode="dark"] .agent-company-scope-chip[data-company-key="tech"], html[data-color-mode="dark"] .agent-employee-company-scope[data-company-key="tech"] { --company-ink: #b5c9d7; --company-line: #566b79; --company-soft: #33414a; }
    html[data-color-mode="dark"] .agent-company-scope-chip[data-company-key="hk"], html[data-color-mode="dark"] .agent-employee-company-scope[data-company-key="hk"] { --company-ink: #add0bc; --company-line: #526e60; --company-soft: #304139; }
    html[data-color-mode="dark"] .agent-company-scope-chip[data-company-key="lab"], html[data-color-mode="dark"] .agent-employee-company-scope[data-company-key="lab"] { --company-ink: #d0c09f; --company-line: #70654f; --company-soft: #423d31; }
    .agent-employee-board-summary { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; }
    .agent-employee-board-summary .agent-field-label { margin: 0; }
    .agent-employee-board-summary .agent-preview-chip-row { min-width: 0; flex-wrap: nowrap; overflow: hidden; }
    .agent-employee-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line); }
    .agent-employee-card-foot span { color: var(--muted); font-size: 7px; }
    .hr-advanced-panel, .hr-page-advanced { border: 1px solid var(--line); background: var(--paper); }
    .hr-advanced-panel > summary, .hr-page-advanced > summary {
      display: flex;
      min-height: 38px;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      color: var(--ink);
      background: var(--surface-subtle);
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
      list-style: none;
    }
    .hr-advanced-panel > summary::-webkit-details-marker, .hr-page-advanced > summary::-webkit-details-marker { display: none; }
    .hr-advanced-panel > summary::after, .hr-page-advanced > summary::after { color: var(--muted); content: '展开'; font-size: 8px; font-weight: 700; }
    .hr-advanced-panel[open] > summary::after, .hr-page-advanced[open] > summary::after { content: '收起'; }
    .hr-advanced-body, .hr-page-advanced-body { display: grid; gap: 10px; padding: 10px; border-top: 1px solid var(--line); }
    .agent-position-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .agent-position-empty { padding: 18px; border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; font-size: 9px; }
    .agent-query-panel { border-top: 3px solid var(--blue); }
    .agent-query-panel .agent-body { padding: 13px 14px 14px; }

    .hr-workspace { min-width: 0; border: 1px solid var(--line); background: var(--paper); }
    .hr-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border-bottom: 1px solid var(--line); background: var(--surface-subtle); }
    .hr-page-head h2 { margin: 0; font-size: 16px; }
    .hr-page-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
    .hr-page-stats { display: flex; flex: 0 0 auto; gap: 6px; }
    .hr-page-stat { min-width: 76px; padding: 7px 9px; border-left: 2px solid var(--accent); background: var(--paper); }
    .hr-page-stat b, .hr-page-stat span { display: block; }
    .hr-page-stat b { font-size: 14px; }
    .hr-page-stat span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .hr-content { display: grid; gap: 14px; padding: 15px; }
    .hr-section { min-width: 0; }
    .hr-section + .hr-section { padding-top: 14px; border-top: 1px solid var(--line); }
    .hr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
    .hr-section-head h3 { margin: 0; font-size: 12px; }
    .hr-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
    .hr-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hr-role-card, .hr-resource-card { min-width: 0; border: 1px solid var(--line); background: var(--surface-subtle); }
    .hr-role-head, .hr-resource-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
    .hr-role-head > div, .hr-resource-head > div { min-width: 0; }
    .hr-role-head strong, .hr-resource-head strong { display: block; font-size: 10px; }
    .hr-role-head span, .hr-resource-head span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
    .hr-role-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; color: var(--accent); background: var(--accent-soft); }
    .hr-role-icon .icon { width: 15px; height: 15px; }
    .hr-role-body, .hr-resource-body { display: grid; gap: 8px; padding: 10px; }
    .hr-role-body > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
    .hr-label { display: block; color: var(--muted); font-size: 8px; font-weight: 900; }
    .hr-chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
    .hr-chip { display: inline-flex; min-height: 21px; align-items: center; padding: 0 6px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: 8px; }
    .hr-chip.is-accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .hr-employee-list { display: grid; gap: 7px; }
    .hr-employee-row { min-width: 0; border: 1px solid var(--line); background: var(--paper); }
    .hr-employee-head { display: grid; grid-template-columns: minmax(160px, 1.1fr) minmax(200px, 1.4fr) auto; gap: 10px; align-items: center; padding: 10px; background: var(--surface-subtle); }
    .hr-employee-identity { min-width: 0; }
    .hr-employee-identity strong, .hr-employee-identity span { display: block; }
    .hr-employee-identity strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .hr-employee-identity span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .hr-employee-summary { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
    .hr-employee-actions { display: flex; align-items: center; gap: 4px; }
    .hr-employee-row:not(.is-expanded) .hr-employee-body { display: none; }
    .hr-employee-body { display: grid; gap: 12px; padding: 11px; border-top: 1px solid var(--line); }
    .hr-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .hr-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hr-scope-block { min-width: 0; padding: 9px; border-left: 2px solid var(--accent); background: var(--surface-subtle); }
    .hr-scope-block > strong { display: block; margin-bottom: 6px; font-size: 9px; }
    .hr-position-groups { display: grid; gap: 7px; }
    .hr-position-group { padding: 9px; border-left: 2px solid var(--blue); background: var(--blue-soft); }
    .hr-position-group > strong { display: block; margin-bottom: 6px; font-size: 9px; }
    .hr-inheritance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .hr-inheritance-item { min-width: 0; padding: 9px; border: 1px solid var(--line); background: var(--surface-subtle); }
    .hr-inheritance-item strong { display: block; margin-bottom: 6px; font-size: 9px; }
    .hr-inheritance-item p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
    .hr-check-grid { display: flex; flex-wrap: wrap; gap: 4px; }
    .hr-project-groups { display: grid; gap: 7px; }
    .hr-project-group { padding-top: 7px; border-top: 1px dashed var(--line); }
    .hr-project-group:first-child { padding-top: 0; border-top: 0; }
    .hr-project-group > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 900; }
    .hr-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hr-resource-body dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 8px; margin: 0; font-size: 8px; line-height: 1.5; }
    .hr-resource-body dt { color: var(--muted); font-weight: 900; }
    .hr-resource-body dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
    .hr-shared-resources { margin-top: 8px; padding: 10px; border-left: 3px solid var(--blue); background: var(--blue-soft); }
    .hr-shared-resources strong { font-size: 9px; }
    .hr-shared-resources .hr-chip-list { margin-top: 6px; }

    .operational-view { display: grid; gap: 14px; }
    .view-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 13px 15px;
      border-bottom: 1px solid var(--line);
    }
    .view-toolbar h2 { margin: 0; font-size: 15px; }
    .view-toolbar p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
    .view-stats { display: flex; gap: 6px; }
    .view-stat { min-width: 74px; padding: 6px 8px; border-left: 2px solid var(--accent); background: #f7f9f8; }
    .view-stat b, .view-stat span { display: block; }
    .view-stat b { font-size: 13px; }
    .view-stat span { color: var(--muted); font-size: 8px; }
    .meeting-overview { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 500px; }
    .meeting-list { border-right: 1px solid var(--line); background: #f8faf9; }
    .meeting-card {
      display: block;
      width: 100%;
      padding: 12px 13px;
      border: 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      background: transparent;
      text-align: left;
    }
    .meeting-card:hover { background: var(--paper); }
    .meeting-card[aria-selected="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
    .meeting-card span, .meeting-card strong, .meeting-card small { display: block; }
    .meeting-card span { color: var(--muted); font-size: 8px; }
    .meeting-card strong { margin-top: 2px; font-size: 10px; }
    .meeting-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
    .meeting-detail { min-width: 0; padding: 16px; }
    .meeting-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .meeting-detail-head h3 { margin: 0; font-size: 14px; }
    .meeting-detail-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
    .speaker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 14px 0; }
    .speaker-card { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 5px; }
    .speaker-card.silent { background: #f7f8f7; }
    .speaker-card strong, .speaker-card span, .speaker-card small { display: block; }
    .speaker-card strong { font-size: 10px; }
    .speaker-card span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .speaker-card small { margin-top: 5px; color: var(--accent); font-size: 8px; font-weight: 800; }
    .speaker-card.silent small { color: var(--danger); }
    .commitment-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .commitment-table th, .commitment-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 9px; text-align: left; }
    .commitment-table th { color: var(--muted); background: #f8faf9; }
    .commitment-table th:first-child { width: 39%; }
    .commitment-table th:last-child { width: 94px; text-align: right; }
    .commitment-table td:last-child { text-align: right; }
    .workflow-list { padding: 2px 15px 12px; }
    .workflow-row {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 130px 90px;
      gap: 10px;
      align-items: center;
      min-height: 62px;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }
    .workflow-row:last-child { border-bottom: 0; }
    .workflow-number { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 9px; font-weight: 900; }
    .workflow-copy strong, .workflow-copy span { display: block; }
    .workflow-copy strong { font-size: 10px; }
    .workflow-copy span { margin-top: 2px; color: var(--muted); font-size: 8px; }
    .workflow-progress { height: 7px; border-radius: 2px; background: #e3e8e5; }
    .workflow-progress i { display: block; width: var(--progress); height: 100%; border-radius: 2px; background: var(--accent); }
    .link-button { color: var(--blue) !important; border-color: #b9cde1 !important; background: var(--blue-soft) !important; }
    .data-boundary { padding: 10px 13px; border-top: 1px solid #ead89c; color: #73510a; background: var(--amber-soft); font-size: 8px; }

    .view-placeholder { padding: 36px 24px; text-align: center; }
    .view-placeholder .placeholder-icon { display: grid; width: 42px; height: 42px; margin: 0 auto 10px; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }
    .view-placeholder h3 { margin: 0; font-size: 14px; }
    .view-placeholder p { max-width: 470px; margin: 5px auto 0; color: var(--muted); font-size: 10px; }

    body[data-active-view="apps"] .context-path,
    body[data-active-view="apps"] .top-actions .select-field,
    body[data-active-view="apps"] .top-actions .date-chip,
    body[data-active-view="apps"] .top-actions .data-chip,
    body[data-active-view="apps"] .context-ribbon,
    body[data-active-view="apps"] .source-line { display: none; }
    body[data-active-view="apps"] .topbar { min-height: 74px; }
    /* OA uses one workbench heading; its content fills the remaining height. */
    body[data-active-view="apps"][data-active-app="visionary-oa"] { overflow: hidden; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] .app-shell,
    body[data-active-view="apps"][data-active-app="visionary-oa"] .workspace { height: 100dvh; min-height: 0; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] .workspace { display: flex; flex-direction: column; overflow: hidden; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] .topbar { min-height: 56px; flex: 0 0 auto; padding-top: 10px; padding-bottom: 10px; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] .content { display: flex; flex: 1 1 auto; min-height: 0; padding: 10px 14px 12px; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] #apps-view,
    body[data-active-view="apps"][data-active-app="visionary-oa"] .app-session-shell,
    body[data-active-view="apps"][data-active-app="visionary-oa"] .app-frame-stack { min-height: 0; height: 100%; flex: 1 1 auto; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] .app-session-shell { display: flex; flex-direction: column; gap: 0; }
    body[data-active-view="apps"][data-active-app="visionary-oa"] .app-frame-stack { border: 0; }
    .oa-topbar-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .oa-topbar-tools[hidden] { display: none; }
    .oa-topbar-readonly { color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 5px 8px; font-size: 11px; font-weight: 600; }
    /* The embedded CRM already provides the LSY logo, module navigation and
       search. Let that branded header own the top of the company workspace. */
    body[data-active-view="apps"][data-active-app="lsy-crm"] { overflow: hidden; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] .app-shell,
    body[data-active-view="apps"][data-active-app="lsy-crm"] .workspace { height: 100dvh; min-height: 0; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] .workspace { display: flex; flex-direction: column; overflow: hidden; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] .topbar { display: none; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] .content { display: flex; min-height: 0; flex: 1 1 auto; padding: 0; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] #apps-view,
    body[data-active-view="apps"][data-active-app="lsy-crm"] .app-session-shell,
    body[data-active-view="apps"][data-active-app="lsy-crm"] .app-frame-stack { min-height: 0; height: 100%; flex: 1 1 auto; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] .app-session-shell { display: flex; flex-direction: column; }
    body[data-active-view="apps"][data-active-app="lsy-crm"] .app-frame-stack { border: 0; }
    body[data-active-view="agent"] .context-subline,
    body[data-active-view="agent"] .context-path,
    body[data-active-view="agent"] .top-actions,
    body[data-active-view="agent"] .context-ribbon,
    body[data-active-view="agent"] .source-line { display: none; }
    body[data-active-view="agent"] .topbar { min-height: 74px; justify-content: flex-start; }
    .app-hub { display: grid; gap: 14px; }
    .app-hub-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 18px 20px;
      border-left: 5px solid var(--accent);
      color: var(--hero-ink);
      background: var(--hero);
    }
    .app-hub-head h2 { margin: 0; font-size: 20px; }
    .app-hub-head p { max-width: 720px; margin: 5px 0 0; color: var(--hero-muted); font-size: 10px; }
    .app-hub-stats { display: flex; gap: 8px; }
    .app-hub-stat { min-width: 82px; padding: 7px 10px; border-left: 1px solid var(--hero-border); }
    .app-hub-stat b, .app-hub-stat span { display: block; }
    .app-hub-stat b { font-size: 19px; }
    .app-hub-stat span { margin-top: 2px; color: var(--hero-muted); font-size: 11px; }
    .app-toolbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }
    .app-filter-stack { display: grid; gap: 7px; min-width: 0; }
    .app-asset-types { display: inline-flex; flex-wrap: wrap; gap: 5px; }
    .app-asset-type {
      min-height: 29px;
      padding: 0 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: var(--paper);
      font-size: 11px;
      font-weight: 900;
    }
    .app-asset-type:hover, .app-asset-type[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .app-categories { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
    .app-category {
      min-height: 34px;
      padding: 0 10px;
      border: 0;
      border-radius: 3px;
      color: var(--muted);
      background: transparent;
      font-size: 12px;
      font-weight: 800;
    }
    .app-category:hover, .app-category[aria-selected="true"] { color: #fff; background: var(--accent); }
    .app-search-wrap { position: relative; width: min(300px, 100%); }
    .app-search-wrap .icon { position: absolute; left: 10px; top: 11px; width: 15px; color: var(--muted); pointer-events: none; }
    .app-search {
      width: 100%;
      height: 38px;
      padding: 0 10px 0 32px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      color: var(--ink);
      background: var(--paper);
      font-size: 13px;
    }
    .app-results-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
    .app-results-meta strong { color: var(--ink); }
    .app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .app-card {
      display: flex;
      min-width: 0;
      min-height: 240px;
      flex-direction: column;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      box-shadow: 0 2px 8px rgba(21,37,31,.025);
    }
    .app-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
    .app-card-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; align-items: start; }
    .app-card-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 6px; color: var(--accent); background: var(--accent-soft); }
    .app-card-icon .icon { width: 18px; height: 18px; }
    .app-card-title { min-width: 0; }
    .app-card-title h3 { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
    .app-card-title span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
    .app-state { min-height: 21px; padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: 900; white-space: nowrap; }
    .app-state.ready { color: var(--accent); background: var(--accent-soft); }
    .app-state.live { color: var(--blue); background: var(--blue-soft); }
    .app-state.development { color: var(--blue); background: var(--blue-soft); }
    .app-state.backend { color: var(--amber); background: var(--amber-soft); }
    .app-state.native { color: var(--amber); background: var(--amber-soft); }
    .app-state.archive { color: var(--muted); background: #edf0ee; }
    .app-card-copy { margin: 12px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .app-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .app-tag { padding: 2px 5px; border-radius: 3px; color: #53615c; background: #f0f3f1; font-size: 10px; font-weight: 800; }
    .app-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
    .app-fact { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--surface-subtle); font-size: 10px; font-weight: 800; }
    .app-limitations { margin-top: 8px; color: var(--muted); font-size: 10px; }
    .app-limitations summary { cursor: pointer; font-weight: 800; }
    .app-limitations ul { margin: 5px 0 0; padding-left: 17px; line-height: 1.55; }
    .app-path { overflow: hidden; margin-top: auto; padding-top: 11px; color: #7a8581; font-family: Consolas, "Microsoft YaHei", monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .app-card-actions { display: flex; gap: 6px; margin-top: 9px; }
    .app-action {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 9px;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      color: var(--ink);
      background: var(--paper);
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
    }
    .app-action.primary { border-color: var(--accent); color: #fff; background: var(--accent); }
    .app-action:disabled { cursor: not-allowed; opacity: .45; }
    .app-empty { padding: 48px 20px; border: 1px dashed var(--line-strong); color: var(--muted); background: var(--paper); text-align: center; font-size: 10px; }
    .app-session { display: grid; gap: 12px; min-width: 0; }
    .app-session-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 42px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
    .app-session-title { flex: 1; min-width: 140px; margin: 0; font-size: 14px; overflow-wrap: anywhere; }
    .app-session-shell { display: grid; gap: 12px; min-width: 0; }
    /* LSY-CRM already has its own branded header and module navigation. */
    .app-session-shell[data-app-id="lsy-crm"] { gap: 0; }
    .app-session-shell[data-app-id="lsy-crm"] .app-session-toolbar { display: none; }
    .app-session-shell[data-app-id="visionary-oa"] .app-session-toolbar { display: none; }
    .app-session-shell[hidden] { display: none; }
    .app-frame-stack { position: relative; width: 100%; height: max(540px, calc(100dvh - 200px)); min-height: 540px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
    .app-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease; }
    .app-frame.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
    .app-load-progress { position: relative; height: 3px; overflow: hidden; border-radius: 999px; background: var(--line); }
    .app-load-progress[hidden] { display: none; }
    .app-load-progress::after { content: ''; position: absolute; inset: 0 auto 0 -35%; width: 35%; border-radius: inherit; background: var(--accent); animation: app-load-progress 1.15s ease-in-out infinite; }
    .app-load-state { display: flex; align-items: center; gap: 8px; min-height: 18px; color: var(--muted); font-size: 10px; font-weight: 800; }
    .app-load-state[hidden] { display: none; }
    .app-load-state-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); animation: app-load-pulse 1s ease-in-out infinite; }
    @keyframes app-load-progress { 0% { transform: translateX(0); } 100% { transform: translateX(385%); } }
    @keyframes app-load-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

    .drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 10;
      background: rgba(14,23,20,.35);
    }
    .drawer {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 11;
      width: min(430px, 100%);
      height: 100vh;
      padding: 21px;
      background: var(--paper);
      box-shadow: -12px 0 35px rgba(10,25,19,.16);
      overflow-y: auto;
    }
    .drawer-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .drawer-head span { color: var(--muted); font-size: 9px; }
    .drawer-head h2 { margin: 3px 0 0; font-size: 18px; }
    .drawer-section { padding: 15px 0; border-bottom: 1px solid var(--line); }
    .drawer-section:last-child { border-bottom: 0; }
    .drawer-section h3 { margin: 0 0 7px; font-size: 11px; }
    .drawer-section p { margin: 0; color: var(--muted); font-size: 10px; }
    .drawer-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .drawer-fact { padding: 9px; border: 1px solid var(--line); border-radius: 5px; }
    .drawer-fact span, .drawer-fact strong { display: block; }
    .drawer-fact span { color: var(--muted); font-size: 8px; }
    .drawer-fact strong { margin-top: 2px; font-size: 11px; }
    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 20;
      max-width: 330px;
      padding: 10px 13px;
      border-radius: 5px;
      color: #fff;
      background: var(--toast-bg);
      box-shadow: var(--shadow);
      font-size: 10px;
    }

    .topbar { flex-wrap: wrap; }
    .top-actions { flex-wrap: wrap; min-width: 0; }
    .theme-control { position: relative; }
    .theme-menu {
      position: fixed; left: 240px; bottom: 18px; z-index: 12;
      width: 390px; max-height: calc(100dvh - 36px); overflow-y: auto;
      padding: 14px; border: 1px solid var(--line-strong); border-radius: 7px;
      color: var(--ink); background: var(--paper); box-shadow: 0 18px 45px rgba(38,48,44,.14);
    }
    html[data-rail="collapsed"] .theme-menu { left: 98px; }
    .theme-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
    .theme-menu-head strong { font-size: 13px; }
    .settings-section { padding-top: 12px; }
    .settings-section + .settings-section { margin-top: 12px; border-top: 1px solid var(--line); }
    .settings-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
    .settings-label b { color: var(--ink); font-size: 10px; }
    .mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    .mode-option {
      display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px;
      border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface-subtle);
      font-size: 11px; font-weight: 800;
    }
    .mode-option:hover { color: var(--ink); border-color: var(--line-strong); }
    .mode-option[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
    .mode-option .icon { width: 15px; }
    .theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
    .theme-option {
      display: grid; grid-template-columns: 38px minmax(0,1fr) 14px; gap: 6px; align-items: center;
      min-height: 50px; padding: 7px; border: 1px solid transparent; border-radius: 5px;
      color: var(--ink); background: transparent; text-align: left; font-size: 11px; font-weight: 700;
    }
    .theme-option:hover { background: var(--surface-subtle); }
    .theme-option[aria-pressed="true"] { border-color: var(--line-strong); background: var(--accent-soft); }
    .theme-option > .icon { width: 14px; color: var(--accent); opacity: 0; }
    .theme-option[aria-pressed="true"] > .icon { opacity: 1; }
    .theme-swatches { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; width: 38px; height: 25px; padding: 3px; border: 1px solid var(--line); background: var(--swatch-canvas); }
    .theme-swatches i { background: var(--swatch-paper); }
    .theme-swatches i:nth-child(2) { background: var(--swatch-accent); }
    .theme-swatches i:nth-child(3) { background: var(--swatch-hero); }
    [data-theme-choice="fresh"] { --swatch-canvas: #f4f7f5; --swatch-paper: #fff; --swatch-accent: #4f7564; --swatch-hero: #e5eee8; }
    [data-theme-choice="mist"] { --swatch-canvas: #f3f6f8; --swatch-paper: #fff; --swatch-accent: #607789; --swatch-hero: #e7edf1; }
    [data-theme-choice="paper"] { --swatch-canvas: #f5f5f0; --swatch-paper: #fffefa; --swatch-accent: #6a765e; --swatch-hero: #e9ece3; }
    [data-theme-choice="rose"] { --swatch-canvas: #f7f4f4; --swatch-paper: #fff; --swatch-accent: #80686b; --swatch-hero: #eee6e7; }
    [data-theme-choice="lake"] { --swatch-canvas: #f2f7f6; --swatch-paper: #fff; --swatch-accent: #527873; --swatch-hero: #e0ebe8; }
    [data-theme-choice="mono"] { --swatch-canvas: #f4f4f3; --swatch-paper: #fff; --swatch-accent: #5d6763; --swatch-hero: #e5e6e3; }
    html[data-color-mode="dark"] .auth-field input,
    html[data-color-mode="dark"] .auth-actions button,
    html[data-color-mode="dark"] button.route-box,
    html[data-color-mode="dark"] .app-frame,
    html[data-color-mode="dark"] .app-frame-stack { background: var(--paper); }
    html[data-color-mode="dark"] .project-row:hover,
    html[data-color-mode="dark"] button.route-box:hover,
    html[data-color-mode="dark"] .meeting-list,
    html[data-color-mode="dark"] .speaker-card.silent,
    html[data-color-mode="dark"] .commitment-table th,
    html[data-color-mode="dark"] .view-stat { background: var(--surface-subtle); }
    html[data-color-mode="dark"] .progress-track,
    html[data-color-mode="dark"] .workflow-progress { background: var(--line); }
    html[data-color-mode="dark"] .toast { color: #26302c; }
    .company-badge { color: var(--company-color); background: color-mix(in srgb, var(--company-color) 12%, var(--paper)); }
    .nav-count { color: var(--danger); background: var(--danger-soft); }
    .context-path, .date-chip, .prompt-chip, .view-stat, .meeting-list, .commitment-table th { background: var(--surface-subtle); }
    .app-tag { color: var(--muted); background: var(--soft); }
    .data-chip.connected { color: #456452; background: #edf3ee; border-color: #cedccf; }
    .data-chip.loading { color: var(--blue); background: var(--blue-soft); border-color: var(--line-strong); }
    .brief-band, .panel, .metrics { border-radius: 0; box-shadow: none; }
    html[data-theme="fresh"] .brief-band { border-left-width: 3px; background: var(--paper); border-bottom: 1px solid var(--line); }
    html[data-theme="mist"] .brief-band { border-left: 0; border-top: 3px solid var(--accent); }
    html[data-theme="mist"] .panel-head { background: var(--surface-subtle); }
    html[data-theme="paper"] .brief-band { border-left: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: var(--paper); }
    html[data-theme="paper"] .brief-band h2, html[data-theme="paper"] .app-hub-head h2 { font-family: Georgia, "Songti SC", SimSun, serif; font-weight: 600; }
    html[data-theme="rose"] .brief-band { border-left-width: 2px; padding-block: 24px; }
    html[data-theme="rose"] .brief-band h2 { font-weight: 600; }
    html[data-theme="lake"] .brief-band { border-left: 0; border-bottom: 3px solid var(--accent); }
    html[data-theme="lake"] .panel-head { border-bottom: 1px solid var(--line-strong); }
    html[data-theme="mono"] .brief-band { border: 1px solid var(--line-strong); background: var(--paper); }
    html[data-theme="mono"] .app-card { border-radius: 0; box-shadow: none; }
    html[data-theme="mono"] .metric strong, html[data-theme="mono"] .brief-stat b { font-variant-numeric: tabular-nums; }

    @media (max-width: 1100px) {
      .main-grid { grid-template-columns: minmax(0, 1fr); }
      .side-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .side-column .panel + .panel { margin-top: 0; }
      .daily-route { grid-template-columns: minmax(110px, .75fr) minmax(0, 2.5fr); }
      .work-status-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .work-status-stat:nth-child(4n) { border-right: 0; }
      .work-status-stat:nth-child(n+5) { border-top: 1px solid var(--line); }
      .route-action { display: none; }
    }

    @media (max-width: 760px) {
      .app-shell { display: block; }
      .rail { position: static; height: auto; padding: 9px 10px; }
      .brand, .rail-label, .rail-foot { display: none; }
      .rail-home { margin: 0 0 6px; }
      .company-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
      .company-group { align-self: start; }
      .company-group.is-active > .company-links,
      html[data-rail="collapsed"] .company-group.is-active > .company-links { display: none; }
      .mobile-company-links { display: flex; grid-column: 1 / -1; gap: 4px; overflow-x: auto; padding: 2px 0 3px; scrollbar-width: thin; }
      .mobile-company-links .company-link { display: flex; width: auto; min-width: 94px; min-height: 34px; flex: 0 0 94px; justify-content: center; gap: 5px; margin: 0; padding: 0 5px; border: 1px solid var(--rail-border); border-radius: 4px; font-size: 9px; white-space: nowrap; }
      .company-button { min-height: 44px; }
      .company-badge { width: 28px; height: 28px; }
      .rail-nav {
        display: flex;
        gap: 3px;
        margin-top: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
      }
      .rail-nav button { min-width: 51px; min-height: 37px; flex: 1 0 51px; }
      .rail-nav .nav-count { position: absolute; margin: -19px 0 0 27px; }
      .rail-workbench { margin-top: 7px; }
      .rail-tools { margin-top: 7px; padding-top: 0; border-top: 0; }
      .rail-option-button { min-height: 37px; justify-content: center; border: 1px solid var(--rail-border); }
      .topbar { position: static; display: block; padding: 10px 12px; }
      .top-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        margin-top: 9px;
      }
      .context-select { width: 100%; max-width: none; }
      .context-path { display: none; }
      .date-chip { display: none; }
      .data-chip { grid-column: 1 / -1; justify-content: center; }
      html[data-rail] .theme-menu { inset: auto 10px 10px; width: auto; max-height: calc(100dvh - 20px); }
      .content { padding: 12px 10px 28px; }
      .source-line { align-items: flex-start; flex-wrap: wrap; }
      .source-line span:last-child { display: none; }
      .brief-band { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
      .brief-actions { border-top: 1px solid var(--hero-border); padding-top: 10px; }
      .brief-stat { flex: 1; padding-left: 0; border-left: 0; }
      .metrics { grid-template-columns: 1fr 1fr; }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .side-column { grid-template-columns: 1fr; }
      .work-status-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .work-status-stat:nth-child(even) { border-right: 0; }
      .work-status-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
      .project-table, .project-table tbody, .project-table tr, .project-table td { display: block; width: 100%; }
      .project-table thead { display: none; }
      .project-row { position: relative; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
      .project-row:last-child { border-bottom: 0; }
      .project-row td { padding: 4px 0; border: 0; }
      .project-row td:last-child { position: static; }
      .project-row td[data-label]:not(:first-child)::before {
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        content: attr(data-label);
        font-size: 8px;
        font-weight: 800;
      }
      .project-name { padding-right: 0; }
      .project-status-cell { text-align: left; }
      .timeline-item { grid-template-columns: 46px 14px minmax(0, 1fr); }
      .timeline-item .evidence { grid-column: 3; }
      .daily-route { display: block; padding: 12px 0; }
      .route-project { margin-bottom: 10px; }
      .work-flow { grid-template-columns: 1fr; gap: 9px; }
      .project-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .route-track { grid-template-columns: 39px minmax(20px, .6fr) minmax(88px, 1.2fr) 20px minmax(88px, 1.2fr) minmax(20px, .6fr) 42px; }
      .route-box { padding-inline: 5px; }
      .route-box strong { white-space: normal; }
      .meeting-overview { display: block; }
      .meeting-list { border-right: 0; border-bottom: 1px solid var(--line); }
      .speaker-grid { grid-template-columns: 1fr 1fr; }
      .workflow-row { grid-template-columns: 30px minmax(0, 1fr) 70px; }
      .workflow-row .text-button { grid-column: 2 / -1; justify-self: start; }
      .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .agent-company-toolbar { align-items: stretch; flex-direction: column; }
      .agent-config-actions { justify-content: flex-start; }
      .agent-section-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .agent-company-employee-strip-list, .agent-position-card-grid, .agent-preview-grid, .agent-employee-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .agent-flow-strip { grid-template-columns: repeat(4, minmax(110px, 1fr)); overflow-x: auto; padding-bottom: 3px; }
      .agent-flow-step:not(:last-child)::after { display: none; }
      .agent-summary-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); overflow-x: auto; }
      .agent-map-grid { grid-template-columns: 1fr; }
      .agent-assignment { grid-template-columns: 1fr 1fr; }
      .agent-assignment .agent-inline-input { grid-column: 1 / -1; }
      .agent-assignment .icon-button { justify-self: start; }
      .agent-list-row-body, .agent-list-row-body.tool-body, .agent-list-row-body.position-body { grid-template-columns: 1fr 1fr; }
      .agent-list-row-body .agent-field:nth-child(3), .agent-list-row-body .agent-field:nth-child(4) { grid-column: 1 / -1; }
      .agent-list-row-body .agent-row-actions { grid-column: 2; }
      .agent-list-row-body.position-body .position-description, .agent-list-row-body.position-body .position-boards, .agent-list-row-body.position-body .agent-row-actions { grid-column: 1 / -1; }
      .hr-role-grid, .hr-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hr-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hr-scope-grid { grid-template-columns: 1fr; }
      .hr-employee-head { grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.4fr) auto; }
    }

    @media (max-width: 920px) {
      .agent-workbench-layout.has-architecture-drawer { grid-template-columns: 1fr; }
      .agent-architecture-drawer { position: static; max-height: none; }
      .app-hub-head { grid-template-columns: 1fr; }
      .app-toolbar { align-items: stretch; flex-direction: column; }
      .app-search-wrap { width: 100%; }
    }

    @media (max-width: 620px) {
      .app-hub-head { padding: 15px; }
      .app-hub-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .app-hub-stat { min-width: 0; }
      .app-categories { display: grid; grid-template-columns: 1fr 1fr; }
      .app-grid { grid-template-columns: 1fr; }
      .app-card { min-height: 205px; }
      .hr-page-head, .hr-section-head { align-items: stretch; flex-direction: column; }
      .hr-page-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hr-page-stat { min-width: 0; }
      .hr-role-grid, .hr-resource-grid, .hr-field-grid, .hr-inheritance-grid { grid-template-columns: 1fr; }
      .hr-employee-head { grid-template-columns: 1fr; }
      .hr-employee-actions { justify-content: flex-start; }
      .hr-field-grid .agent-row-actions { justify-content: flex-start; }
      .agent-company-employee-strip-list, .agent-position-card-grid, .agent-preview-grid, .agent-employee-card-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .context-ribbon { flex-wrap: wrap; }
      .route-track { grid-template-columns: 30px minmax(4px,.25fr) minmax(0,1fr) 12px minmax(0,1fr) minmax(4px,.25fr) 34px; gap: 3px; }
      .route-start small, .route-target small { white-space: normal; overflow-wrap: anywhere; }
      .theme-options { grid-template-columns: 1fr; }
      .theme-option { grid-template-columns: 38px minmax(0,1fr) 14px; }
    }
    @media (max-width: 760px) {
    }