:root {
    --accent: #4574f5;
    --accent-soft: #e8eefe;
    --bg: #ffffff;
    --bg-side: #f7f8fa;
    --bg-hover: #f0f2f5;
    --bg-card: #ffffff;
    --line: #e4e7ec;
    --text: #202531;
    --text-2: #6b7280;
    --text-3: #9aa1ad;
    --prio-alta: #e03131;
    --prio-media: #f59f00;
    --prio-baixa: #4574f5;
    --prio-nenhuma: #b6bcc6;
    --ok: #2f9e44;
    --agent-ops: #7048e8;
    --agent-pesquisa: #0ca678;
    --agent-deploy: #e8590c;
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 16px rgba(16, 24, 40, .06);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --accent: #6b8ffa;
      --accent-soft: #23304f;
      --bg: #16181d;
      --bg-side: #1c1f26;
      --bg-hover: #262a33;
      --bg-card: #1f232b;
      --line: #2c313b;
      --text: #e6e8ee;
      --text-2: #9aa1ad;
      --text-3: #6b7280;
      --prio-nenhuma: #4b5261;
      --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    }
  }
  :root[data-theme="light"] {
    --accent: #4574f5; --accent-soft: #e8eefe; --bg: #ffffff; --bg-side: #f7f8fa;
    --bg-hover: #f0f2f5; --bg-card: #ffffff; --line: #e4e7ec; --text: #202531;
    --text-2: #6b7280; --text-3: #9aa1ad; --prio-nenhuma: #b6bcc6;
    --shadow: 0 1px 3px rgba(16,24,40,.08), 0 4px 16px rgba(16,24,40,.06);
  }
  :root[data-theme="dark"] {
    --accent: #6b8ffa; --accent-soft: #23304f; --bg: #16181d; --bg-side: #1c1f26;
    --bg-hover: #262a33; --bg-card: #1f232b; --line: #2c313b; --text: #e6e8ee;
    --text-2: #9aa1ad; --text-3: #6b7280; --prio-nenhuma: #4b5261;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg-side); color: var(--text);
    font: 14px/1.45 -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
  }

  /* ── moldura da página ─────────────────────────────── */
  .page { max-width: 1240px; margin: 0 auto; padding: 24px 20px 48px; }
  .page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 6px; }
  .page-head h1 { font-size: 19px; font-weight: 650; margin: 0; }
  .page-head .sub { color: var(--text-2); font-size: 13px; }
  .disclaimer { color: var(--text-3); font-size: 12px; margin: 0 0 16px; }

  /* ── barra lateral de módulos (rail) ───────────────── */
  .app { display: flex; gap: 12px; align-items: stretch; }
  .app.login-mode .rail { display: none; }
  .rail {
    width: 60px; flex: none; background: var(--bg-side); border: 1px solid var(--line);
    border-radius: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column;
    align-items: center; gap: 4px; padding: 10px 0;
  }
  .rail-btn {
    position: relative; width: 42px; height: 42px; border: none; background: transparent;
    border-radius: 10px; color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  }
  .rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
  .rail-btn:hover { background: var(--bg-hover); color: var(--text); }
  .rail-btn.on { background: var(--accent-soft); color: var(--accent); }
  .rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rail-sep { width: 26px; height: 1px; background: var(--line); margin: 6px 0; }
  .rail .spacer { flex: 1; }
  .tip {
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--text); color: var(--bg); font-size: 12px; font-weight: 500; white-space: nowrap;
    padding: 4px 9px; border-radius: 6px; opacity: 0; pointer-events: none; z-index: 5;
  }
  .tip::before {
    content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-right-color: var(--text);
  }
  .rail-btn:hover .tip, .rail-btn:focus-visible .tip { opacity: 1; }
  .content { flex: 1; min-width: 0; }

  /* ── avatar do usuário + menu de conta ─────────────── */
  .rail-user-wrap { position: relative; margin-bottom: 8px; }
  .rail-user {
    position: relative; width: 34px; height: 34px; border-radius: 50%; border: none; padding: 0;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
    display: grid; place-items: center; overflow: hidden;
  }
  .rail-user img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rail-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rail-user:hover .tip, .rail-user:focus-visible .tip { opacity: 1; }
  .user-menu {
    position: absolute; left: calc(100% + 12px); top: 0; min-width: 172px; z-index: 20;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 9px;
    box-shadow: var(--shadow); padding: 5px; display: none;
  }
  .user-menu.open { display: block; }
  .user-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent;
    color: var(--text); font: inherit; font-size: 13.5px; padding: 7px 9px; border-radius: 6px;
    cursor: pointer; text-align: left;
  }
  .user-menu button:hover { background: var(--bg-hover); }
  .user-menu button svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; flex: none;
  }
  .user-menu .sep { height: 1px; background: var(--line); margin: 4px 2px; }
  .user-menu .danger { color: var(--prio-alta); }

  .screen { display: none; }
  .screen.on { display: block; }
  .frame {
    display: flex; min-height: 640px; border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; background: var(--bg); box-shadow: var(--shadow);
  }
  .caption { color: var(--text-2); font-size: 12.5px; margin: 10px 2px 0; max-width: 72ch; }
  .caption b { color: var(--text); font-weight: 600; }

  /* ── sidebar ───────────────────────────────────────── */
  .side {
    width: 232px; flex: none; background: var(--bg-side); border-right: 1px solid var(--line);
    padding: 12px 8px; overflow-y: auto;
  }
  .side .who {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; font-weight: 650;
  }
  .who .av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 700; }
  .side h5 {
    margin: 14px 8px 4px; font-size: 11px; font-weight: 600; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .06em;
  }
  .nav-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px;
    color: var(--text); cursor: default;
  }
  .nav-item:hover { background: var(--bg-hover); }
  .nav-item.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .nav-item .ico { width: 18px; text-align: center; flex: none; }
  .nav-item .n { margin-left: auto; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
  .nav-item.indent { padding-left: 26px; }

  /* ── coluna da lista ───────────────────────────────── */
  .main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .main-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .main-head h2 { font-size: 16px; margin: 0; font-weight: 650; }
  .main-head .tools { margin-left: auto; display: flex; gap: 10px; color: var(--text-3); font-size: 13px; }
  .tool-chip { border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; background: var(--bg-card); }
  .quick {
    margin: 12px 16px 4px; border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 12px; color: var(--text-3); background: var(--bg-card);
  }
  .quick b { color: var(--text-2); font-weight: 500; }
  .group { margin: 12px 16px 0; }
  .group > h4 {
    margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--text-2);
    display: flex; gap: 6px; align-items: center;
  }
  .group > h4 .n { color: var(--text-3); font-weight: 500; }
  .task {
    display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 7px;
  }
  .task:hover { background: var(--bg-hover); }
  .task.sel { background: var(--accent-soft); }
  .cb {
    width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 4px;
    border: 1.6px solid var(--prio-nenhuma); background: transparent;
  }
  .cb.p5 { border-color: var(--prio-alta); }
  .cb.p3 { border-color: var(--prio-media); }
  .cb.p1 { border-color: var(--prio-baixa); }
  .cb.done { border-color: var(--text-3); background: var(--text-3); position: relative; }
  .cb.done::after { content: "✓"; position: absolute; inset: 0; color: var(--bg); font-size: 11px; line-height: 15px; text-align: center; }
  .t-body { min-width: 0; flex: 1; }
  .t-title { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .t-title .pin { font-size: 11px; }
  .task.done-row .t-title { color: var(--text-3); text-decoration: line-through; }
  .t-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 1px; }
  .t-meta .due { color: var(--accent); }
  .t-meta .overdue { color: var(--prio-alta); }
  .tag { color: var(--text-2); background: var(--bg-hover); border-radius: 4px; padding: 0 6px; font-size: 11.5px; }
  .chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 999px;
    padding: 1px 8px 1px 3px; color: #fff; font-weight: 600;
  }
  .chip i { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.25);
    display: grid; place-items: center; font-style: normal; font-size: 10px; line-height: 1; }
  .chip.ops { background: var(--agent-ops); }
  .chip.pesq { background: var(--agent-pesquisa); }
  .chip.dep { background: var(--agent-deploy); }

  /* ── painel de detalhe ─────────────────────────────── */
  .detail {
    width: 316px; flex: none; border-left: 1px solid var(--line); padding: 14px 16px;
    overflow-y: auto; background: var(--bg);
  }
  .detail .row1 { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 12.5px; }
  .detail .row1 .due { color: var(--accent); font-weight: 600; }
  .detail h3 { margin: 10px 0 2px; font-size: 15.5px; font-weight: 650; }
  .detail .desc { color: var(--text-2); font-size: 13px; margin: 6px 0 12px; }
  .check { display: flex; gap: 9px; align-items: center; padding: 4px 0; font-size: 13px; }
  .check .cb { width: 14px; height: 14px; margin: 0; }
  .check.off { color: var(--text-3); text-decoration: line-through; }
  .prog { height: 4px; border-radius: 2px; background: var(--bg-hover); margin: 8px 0 14px; overflow: hidden; }
  .prog i { display: block; height: 100%; width: 66%; background: var(--accent); }
  .kv { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
  .kv b { color: var(--text-3); font-weight: 500; width: 86px; flex: none; }
  .activity { font-size: 12px; color: var(--text-3); padding: 3px 0; }
  .activity b { color: var(--text-2); font-weight: 600; }

  /* ── kanban ────────────────────────────────────────── */
  .board { display: flex; gap: 12px; padding: 16px; overflow-x: auto; flex: 1; align-items: flex-start; }
  .col { width: 250px; flex: none; background: var(--bg-side); border: 1px solid var(--line); border-radius: 9px; padding: 8px; }
  .col h4 { margin: 2px 6px 8px; font-size: 12.5px; font-weight: 650; display: flex; gap: 6px; }
  .col h4 .n { color: var(--text-3); font-weight: 500; }
  .card {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 7px;
    padding: 8px 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.05);
  }
  .card .t-meta { margin-top: 5px; }

  /* ── calendário ────────────────────────────────────── */
  .cal { flex: 1; display: flex; flex-direction: column; }
  .cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); }
  .cal-grid .dow {
    padding: 6px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); border-bottom: 1px solid var(--line); background: var(--bg-side);
  }
  .day { min-height: 92px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 6px; }
  .day:nth-child(7n+1) { border-left: none; }
  .day .d { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .day.today .d { color: #fff; background: var(--accent); border-radius: 50%; width: 18px; height: 18px;
    display: grid; place-items: center; }
  .day.dim { background: var(--bg-side); }
  .ev { font-size: 11px; border-radius: 4px; padding: 1px 5px; margin-top: 3px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ev.ops { background: var(--agent-ops); } .ev.pesq { background: var(--agent-pesquisa); }
  .ev.dep { background: var(--agent-deploy); } .ev.sys { background: var(--text-3); }

  /* ── matriz ────────────────────────────────────────── */
  .matrix { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 16px; }
  .quad { border: 1px solid var(--line); border-radius: 9px; background: var(--bg-card); padding: 10px 12px; min-height: 200px; }
  .quad h4 { margin: 0 0 8px; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
  .quad h4 .dot { width: 8px; height: 8px; border-radius: 50%; }
  .quad h4 .n { color: var(--text-3); font-weight: 500; margin-left: auto; }

  /* ── hábitos ───────────────────────────────────────── */
  .habits { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .habit {
    display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
    border-radius: 9px; background: var(--bg-card); padding: 10px 14px;
  }
  .habit .ico { font-size: 20px; }
  .habit .hb { flex: 1; }
  .habit .hb small { color: var(--text-3); display: block; }
  .week { display: flex; gap: 5px; }
  .week i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line);
    display: grid; place-items: center; font-style: normal; font-size: 10px; color: var(--text-3); }
  .week i.y { background: var(--ok); border-color: var(--ok); color: #fff; }
  .streak { color: var(--text-2); font-size: 12.5px; width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

  /* ── painel do dono ────────────────────────────────── */
  .own { flex: 1; padding: 16px; overflow-y: auto; }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
  .stat { border: 1px solid var(--line); border-radius: 9px; background: var(--bg-card); padding: 10px 14px; }
  .stat b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; }
  .stat span { color: var(--text-3); font-size: 12px; }
  .own h4.sect { margin: 14px 0 8px; font-size: 12.5px; color: var(--text-2); }
  .notif { display: flex; gap: 10px; align-items: baseline; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .notif time { color: var(--text-3); font-size: 11.5px; margin-left: auto; flex: none; }

  /* ── gestão de agentes ─────────────────────────────── */
  .mini { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: inline-grid;
    place-items: center; font-size: 11px; font-weight: 700; flex: none; }
  .avatar-edit { position: relative; cursor: pointer; display: inline-grid; place-items: center; flex: none; }
  .avatar-edit img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: none; }
  .avatar-edit .avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; display: grid; place-items: center;
    border: 2px solid var(--bg-card); }
  .atable { width: 100%; border-collapse: collapse; font-size: 13px; }
  .atable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .atable td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .atable tr:hover td { background: var(--bg-hover); }
  .atable tr.off td { opacity: .6; }
  .a-id { color: var(--text-3); font-size: 12px; }
  .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 999px;
    padding: 1px 9px; font-weight: 600; white-space: nowrap; }
  .pill.on { background: rgba(47, 158, 68, .16); color: var(--ok); }
  .pill.off { background: var(--bg-hover); color: var(--text-3); }
  .tok { font-family: ui-monospace, "Cascadia Code", monospace; font-size: 12px; color: var(--text-2); white-space: nowrap; }
  .rowact { color: var(--accent); font-size: 12px; white-space: nowrap; }
  .rowact span { cursor: pointer; }
  .rowact span:hover { text-decoration: underline; }
  .rowact .danger { color: var(--prio-alta); }

  .owner-card { margin: 6px 16px 16px; border: 1px solid var(--line); border-radius: 9px;
    padding: 12px 14px; background: var(--bg-card); display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; }
  .owner-card .oc-head { display: flex; align-items: center; gap: 9px; font-weight: 650; }
  .owner-card .kv { border: none; padding: 0; }

  .form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); font-weight: 600; margin: 13px 0 5px; }
  .form label:first-of-type { margin-top: 4px; }
  .form input[type=text], .form input[type=password], .form select { width: 100%; padding: 6px 9px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--bg-side); color: var(--text); font: inherit; font-size: 13px; }
  .pw-wrap { position: relative; }
  .pw-wrap input { padding-right: 38px !important; }
  .pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none;
    background: transparent; cursor: pointer; padding: 4px; color: var(--text-3); display: grid; place-items: center; }
  .pw-eye:hover { color: var(--text-2); }
  .pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 5px; }
  .pw-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pw-eye .eye-off { display: none; }
  .pw-eye.on { color: var(--accent); }
  .pw-eye.on .eye-open { display: none; }
  .pw-eye.on .eye-off { display: block; }
  .form .hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }
  .swatches { display: flex; gap: 7px; }
  .swatches i { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
  .swatches i.sel { outline: 2px solid var(--text); outline-offset: 2px; }
  .icon-pick { display: flex; flex-wrap: wrap; gap: 7px; }
  .icon-pick .ic { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-side);
    display: grid; place-items: center; font-size: 16px; cursor: pointer; font-weight: 700; color: var(--text-2); }
  .icon-pick .ic.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
  .icon-pick .ic:hover { background: var(--bg-hover); }
  .seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .seg span { flex: 1; text-align: center; padding: 5px; font-size: 12px; cursor: pointer; color: var(--text-2); }
  .seg span.on { background: var(--accent); color: #fff; font-weight: 600; }
  .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
  .sw { width: 34px; height: 19px; border-radius: 999px; background: var(--accent); position: relative; flex: none; }
  .sw::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; top: 2px; right: 2px; }
  .sw.off { background: var(--prio-nenhuma); } .sw.off::after { right: auto; left: 2px; }
  .btn { margin-top: 16px; width: 100%; padding: 8px; border: none; border-radius: 7px;
    background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
  .tokbox { margin-top: 14px; border: 1px dashed var(--accent); background: var(--accent-soft);
    border-radius: 8px; padding: 10px 12px; }
  .tokbox b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent); margin-bottom: 6px; }
  .tokbox code { font-family: ui-monospace, "Cascadia Code", monospace; font-size: 12.5px;
    color: var(--text); word-break: break-all; }
  .tokbox small { display: block; color: var(--text-2); margin-top: 7px; font-size: 11.5px; }

  /* ── configurações ─────────────────────────────────── */
  .set-nav { width: 210px; flex: none; background: var(--bg-side); border-right: 1px solid var(--line); padding: 12px 8px; }
  .set-nav h5 { margin: 12px 8px 4px; font-size: 11px; font-weight: 600; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .06em; }
  /* Itens do menu são <button> (trocam painel): zera o estilo nativo do botão para que
     herdem o .nav-item. `.sel` vem depois e continua vencendo na cor/peso. */
  .set-nav button.nav-item {
    border: none; background: transparent; font: inherit; color: var(--text);
    width: 100%; text-align: left; cursor: pointer;
  }
  .set-nav .nav-item.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .set-nav .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* Painéis de Preferências: só um visível por vez (o menu escolhe qual). */
  .set-panel { display: none; }
  .set-panel.on { display: block; }
  .set-hint { margin: 14px 8px 4px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
  .set-body { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px; }
  .set-body h3 { margin: 0 0 3px; font-size: 16px; }
  .set-body .lead { color: var(--text-2); font-size: 12.5px; margin: 0 0 16px; }
  .set-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
  .set-row:first-of-type { border-top: none; }
  .set-row .lbl { flex: 1; min-width: 0; }
  .set-row .lbl b { font-weight: 600; font-size: 13.5px; }
  .set-row .lbl small { display: block; color: var(--text-3); font-size: 12px; margin-top: 1px; }
  .set-row .ctl { flex: none; }
  .set-row select, .set-row input[type=text] { padding: 5px 9px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px; min-width: 150px; }
  .scope-note { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin-left: 8px; }
  .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .feat { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px;
    padding: 9px 11px; background: var(--bg-card); }
  .feat .ico { font-size: 17px; }
  .feat .fn { flex: 1; font-size: 13px; font-weight: 500; }

  /* ── estatística ───────────────────────────────────── */
  .stats-body { flex: 1; overflow-y: auto; padding: 16px; }
  .panel { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); padding: 14px 16px; margin-bottom: 14px; }
  .panel > h4 { margin: 0 0 12px; font-size: 13px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; }
  .panel > h4 small { color: var(--text-3); font-weight: 400; }
  .stat-hero { display: grid; grid-template-columns: 1fr 232px; gap: 14px; margin-bottom: 14px; }
  .hero-card { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); padding: 16px; }
  .hero-label { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .score-big { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1.05; }
  .score-sub { font-size: 12px; color: var(--text-3); margin-top: 5px; }
  .score-sub .up { color: var(--ok); font-weight: 600; }
  .lvl { margin-top: 16px; }
  .lvl-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
  .lvlbar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
  .lvlbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
  .ring-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
  .ring-wrap { position: relative; width: 132px; height: 132px; }
  .ring-wrap svg { width: 100%; height: 100%; }
  .ring-wrap circle { fill: none; stroke-width: 3.2; }
  .ring-bg { stroke: var(--bg-hover); }
  .ring-fg { stroke: var(--accent); stroke-linecap: round; }
  .ring-label { position: absolute; inset: 0; display: grid; place-items: center; }
  .ring-label b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .ring-cap { font-size: 12.5px; font-weight: 600; }
  .ring-cap small { display: block; color: var(--text-3); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
  .legend { display: flex; gap: 16px; margin: 0 0 12px; font-size: 12px; color: var(--text-2); }
  .legend .lg { display: inline-flex; align-items: center; gap: 6px; }
  .legend i { width: 11px; height: 11px; border-radius: 3px; }
  .bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 20px; }
  .bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
  .bar .cols { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; }
  .bar .col { width: 15px; border-radius: 4px 4px 0 0; position: relative; min-height: 3px; }
  .col.prev { background: var(--bg-hover); }
  .col.cur { background: var(--accent); }
  .col.cur b { position: absolute; top: -17px; left: -8px; right: -8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .bar > span { font-size: 11px; color: var(--text-3); }
  .bar.today > span { color: var(--accent); font-weight: 600; }
  .chart-base { height: 1px; background: var(--line); }
  .delta { font-size: 11px; font-weight: 600; font-style: normal; }
  .delta.up { color: var(--ok); }
  .delta.down { color: var(--prio-alta); }
  .stat .delta { display: block; margin-top: 4px; }
  .stat .delta small { color: var(--text-3); font-weight: 400; }
  .ag-num .delta { display: block; margin-top: 2px; }
  .ring-delta { font-size: 11.5px; color: var(--text-3); }
  .stats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .stats-cols .panel { margin-bottom: 0; }
  .ag-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
  .ag-row:first-of-type { border-top: none; }
  .ag-row .ag-info { flex: 1; min-width: 0; }
  .ag-row .ag-info b { font-size: 13px; }
  .ag-row .ag-info small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 1px; }
  .ag-row .ag-num { text-align: right; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .ag-row .ag-num b { display: block; font-size: 14px; color: var(--text); }
  .lvl-badge { font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 5px; padding: 1px 6px; }
  .pbar-row { display: flex; align-items: center; gap: 10px; margin: 11px 0; font-size: 12.5px; }
  .pbar-row .lab { width: 62px; color: var(--text-2); flex: none; }
  .pbar { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }
  .pbar i { display: block; height: 100%; border-radius: 4px; }
  .pbar-row .val { width: 26px; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }

  @media (max-width: 900px) { .detail { display: none; } .side, .set-nav { width: 200px; } }
  @media (max-width: 720px) { .stat-hero, .stats-cols { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .side { display: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .rail-btn { transition: background .12s, color .12s; }
    .tip { transition: opacity .12s; }
    .help-panel { transition: transform .18s ease; }
    .tour-ring, .tour-bubble { transition: all .18s ease; }
  }

  /* ══════════ AJUDA E ONBOARDING (spec 17) ══════════ */
  /* botão "?" nas telas */
  .help-btn {
    flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg-card); color: var(--text-2); cursor: pointer; font-weight: 700;
    font-size: 15px; line-height: 1; display: grid; place-items: center;
  }
  .help-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
  .help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .set-body { position: relative; }
  .frame { position: relative; }
  .help-btn-inline { position: absolute; top: 14px; right: 16px; z-index: 3; }

  /* painel lateral de ajuda (não-modal) */
  .help-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.28); z-index: 60; display: none; }
  .help-overlay.open { display: block; }
  .help-panel {
    position: fixed; top: 0; right: 0; height: 100%; width: 404px; max-width: 92vw; z-index: 61;
    background: var(--bg); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(16,24,40,.14);
    display: flex; flex-direction: column; transform: translateX(100%);
  }
  .help-overlay.open .help-panel { transform: translateX(0); }
  .help-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .help-head h3 { margin: 0; font-size: 15.5px; font-weight: 650; }
  .help-head h3:focus-visible { outline: none; }
  .help-close {
    margin-left: auto; border: none; background: transparent; color: var(--text-3); cursor: pointer;
    font-size: 16px; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
  }
  .help-close:hover { background: var(--bg-hover); color: var(--text); }
  .help-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .help-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
  .help-intro { color: var(--text-2); font-size: 13px; margin: 0 0 6px; }
  .help-item { padding: 12px 0; border-top: 1px solid var(--line); }
  .help-item:first-child { border-top: none; }
  .help-item h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 650; }
  .help-item .what { color: var(--text); font-size: 12.5px; margin: 0 0 7px; }
  .help-item .impl {
    color: var(--text-2); font-size: 12px; margin: 0; padding: 7px 9px; border-radius: 7px;
    background: var(--bg-side); border: 1px solid var(--line); display: flex; gap: 7px;
  }
  .help-item .impl::before { content: "⚠"; color: var(--prio-media); flex: none; font-size: 12px; }
  .help-item .ref { display: block; margin-top: 6px; font-size: 11px; color: var(--text-3); }
  .help-foot { padding: 12px 16px; border-top: 1px solid var(--line); }
  .help-tour-btn {
    width: 100%; padding: 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft);
    color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
  }
  .help-tour-btn:hover { background: var(--accent); color: #fff; }
  .help-tour-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .help-tour-btn[hidden] { display: none; }

  /* onboarding "Primeiros passos" */
  .ob-overlay { position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 62; display: none; place-items: center; padding: 20px; }
  .ob-overlay.open { display: grid; }
  .ob-modal {
    width: 470px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: var(--bg-card);
    border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow);
  }
  .ob-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 6px; }
  .ob-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
  .ob-sub { margin: 3px 0 0; color: var(--text-2); font-size: 12.5px; }
  .ob-progress { padding: 8px 18px 4px; }
  .ob-progress-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; }
  .ob-progress-top span:first-child { font-weight: 700; color: var(--accent); }
  .ob-bar, .ob-card-bar { height: 7px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }
  .ob-bar i, .ob-card-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
  .ob-list { padding: 10px 12px 4px; }
  .ob-step { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 9px; }
  .ob-step:hover { background: var(--bg-hover); }
  .ob-step .mark {
    flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; border: 1.6px solid var(--prio-nenhuma); color: var(--text-3);
  }
  .ob-step.done .mark { background: var(--ok); border-color: var(--ok); color: #fff; }
  .ob-step .st-body { flex: 1; min-width: 0; }
  .ob-step .st-body b { font-size: 13.5px; font-weight: 600; }
  .ob-step.done .st-body b { color: var(--text-2); }
  .ob-step .st-body small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 1px; }
  .ob-go {
    flex: none; border: 1px solid var(--line); background: var(--bg-card); color: var(--accent);
    border-radius: 6px; padding: 4px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .ob-go:hover { background: var(--accent-soft); border-color: var(--accent); }
  .ob-step.done .ob-go { color: var(--text-3); font-weight: 500; }
  .ob-foot { display: flex; gap: 10px; align-items: center; padding: 12px 18px 16px; }
  .ob-dismiss {
    margin-left: auto; border: none; background: transparent; color: var(--text-2); cursor: pointer;
    font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 7px;
  }
  .ob-dismiss:hover { background: var(--bg-hover); color: var(--text); }
  .ob-done-note { font-size: 12px; color: var(--ok); font-weight: 600; }

  /* card proativo (topo do painel do dono) */
  .ob-card {
    display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 14px;
    border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft);
  }
  .ob-card[hidden] { display: none; }
  .ob-card-ico { font-size: 22px; flex: none; }
  .ob-card-body { flex: 1; min-width: 0; }
  .ob-card-body b { font-size: 13.5px; }
  .ob-card-body span { display: block; color: var(--text-2); font-size: 12px; margin-top: 3px; }
  .ob-card-bar { margin: 6px 0; max-width: 320px; }
  .ob-card-act { display: flex; gap: 8px; flex: none; }
  .btn-mini {
    border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 7px;
    padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .btn-mini:hover { filter: brightness(1.06); }
  .btn-mini.ghost { background: transparent; color: var(--accent); }
  .btn-mini.ghost:hover { background: var(--bg-card); filter: none; }

  /* tour guiado */
  .tour-overlay { display: none; }
  .tour-overlay.open { display: block; }
  .tour-backdrop { position: fixed; inset: 0; z-index: 70; }
  .tour-ring {
    position: fixed; z-index: 71; border-radius: 9px; pointer-events: none;
    box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(16,24,40,.5);
  }
  .tour-bubble {
    position: fixed; z-index: 72; width: 288px; max-width: 92vw; background: var(--bg-card);
    border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 13px 15px;
  }
  .tour-bubble h4 { margin: 0 0 5px; font-size: 14px; font-weight: 650; }
  .tour-bubble p { margin: 0; font-size: 12.5px; color: var(--text-2); }
  .tour-foot { display: flex; align-items: center; margin-top: 13px; gap: 8px; }
  .tour-count { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .tour-btns { margin-left: auto; display: flex; gap: 6px; }
  .tour-btns button {
    border: 1px solid var(--line); background: var(--bg-card); color: var(--text-2); cursor: pointer;
    border-radius: 7px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  }
  .tour-btns button:hover { background: var(--bg-hover); color: var(--text); }
  .tour-btns button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .tour-btns button.primary:hover { filter: brightness(1.06); background: var(--accent); color: #fff; }
  .tour-btns button:disabled { opacity: .4; cursor: default; }
  .tour-btns button:focus-visible, .ob-go:focus-visible, .btn-mini:focus-visible, .ob-dismiss:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

/* ══════════ Web UI runtime (fase 1 — fundação) ══════════ */
/* Shell de página inteira (não é o mockup embutido; ocupa a viewport). */
.web-shell { display: flex; min-height: 100vh; background: var(--bg-side); }
/* `position: sticky` cria um stacking context: sem um z-index explícito o rail fica em
   `auto` (≈0) e QUALQUER elemento posicionado do conteúdo com z-index >= 1 (ex.: .help-btn-inline
   z-3, .popmenu z-40) é pintado por cima dele — junto com os tooltips (.tip), que ficam presos
   nesse contexto. z-index 30 põe o rail (e seus tooltips) acima do conteúdo, e ainda ABAIXO dos
   sobrepostos que devem cobri-lo: popmenu(40), drawer(55), ajuda(60/61), onboarding(62), tour(70+). */
.web-shell .rail { border-radius: 0; border: none; border-right: 1px solid var(--line);
  box-shadow: none; height: 100vh; position: sticky; top: 0; z-index: 30; }
.web-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* topbar com seletor de agente (workspace) + avatar do humano + ? */
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); background: var(--bg); }
/* Marca: símbolo + nome do produto. É um link para "/" (convenção universal de logo). */
.topbar .brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none;
}
.topbar .brand:hover { color: var(--text); }
.topbar .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* flex: none impede que o ícone seja esmagado quando a topbar aperta */
.topbar .brand-mark { display: block; flex: none; border-radius: 6px; }
.topbar .grow { flex: 1; }
.ws-select { position: relative; }
.ws-select label { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
.ws-select select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px; min-width: 190px; }
.ws-current { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }

/* login em página inteira */
.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg-side); padding: 20px; }
.login-card { width: 340px; max-width: 92%; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 13px; box-shadow: var(--shadow); padding: 26px 26px 30px; }

/* mensagens (flash) */
.flash { border-radius: 8px; padding: 9px 12px; font-size: 13px; margin: 0 0 14px; }
.flash.err { background: rgba(224,49,49,.12); color: var(--prio-alta); border: 1px solid rgba(224,49,49,.3); }
.flash.ok { background: rgba(47,158,68,.12); color: var(--ok); border: 1px solid rgba(47,158,68,.3); }
/* Ação dentro do flash (ex.: "Anexo removido. Desfazer"). Inline de propósito: o .flash é
   usado em toda a UI e virar flex aqui mudaria o layout de todos os outros. */
.flash form { display: inline; }
.flash .linkbtn { margin-left: 8px; color: inherit; font-weight: 700; text-decoration: underline; }

/* estado vazio (ex.: humano sem agentes) */
.empty { max-width: 460px; margin: 64px auto; text-align: center; color: var(--text-2); }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.empty h3 { font-size: 17px; margin: 0 0 6px; color: var(--text); }
.empty p { font-size: 13.5px; margin: 0 0 18px; }
.empty .btn { display: inline-block; width: auto; padding: 8px 18px; text-decoration: none; }

/* área de conteúdo trocável (ganchos da fase 2) */
#view { flex: 1; min-width: 0; }
.view-loading { padding: 24px; color: var(--text-3); font-size: 13px; }
[data-hx-swap] { cursor: pointer; }

/* ══════════ Fase 2 — sidebar (organização) ══════════ */
.side h5 { display: flex; align-items: center; gap: 6px; }
.side h5 .side-add { margin-left: auto; }
/* Só a PRIMEIRA ação empurra para a direita. Com `margin-left:auto` nas duas (pasta e
   lista), o flex divide o espaço livre entre elas e a de pasta flutua no meio do título. */
.side h5 .side-add ~ .side-add { margin-left: 0; }
.side-add {
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text-2);
  width: 18px; height: 18px; border-radius: 5px; font-size: 13px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.side-add:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.side-form { display: none; gap: 5px; flex-direction: column; margin: 4px 8px 8px; }
.side-form:not([hidden]) { display: flex; }
.side-form input, .side-form textarea {
  width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-card); color: var(--text); font: inherit; font-size: 12.5px;
}
/* A regra é JSON: fonte mono, sem autocorreção e sem resize horizontal (estouraria a sidebar). */
.side-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
  line-height: 1.45; resize: vertical; min-height: 46px;
}
.side-form button {
  padding: 5px; border: none; border-radius: 6px; background: var(--accent); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
/* Pré-visualizar (dry-run) x Salvar: a ação secundária não disputa o olho com a primária.
   `.side-form .side-preview` (0,2,0) vence `.side-form button` (0,1,1) sem !important. */
.side-form-row { display: flex; gap: 5px; }
.side-form-row button { flex: 1; }
.side-form .side-preview {
  background: var(--bg-card); color: var(--text-2); border: 1px solid var(--line); font-weight: 500;
}
.side-form .side-preview:hover { background: var(--bg-hover); color: var(--text); }
.side-preview-out { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
.side-preview-out:empty { display: none; }
.side-preview-out .flash { margin: 0; padding: 5px 7px; font-size: 11.5px; }
.nav-item.list-row { position: relative; }
.nav-item.list-row .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.folder { font-weight: 600; color: var(--text-2); }
.nav-item .shared { font-size: 11px; margin-left: 2px; }
.nav-hint { color: var(--text-3); font-size: 12px; padding: 4px 10px; }
.side-mini {
  margin-left: auto; border: none; background: transparent; color: var(--text-3);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 5px; opacity: 0;
}
.nav-item:hover .side-mini, .member-row:hover .side-mini { opacity: 1; }
.side-mini:hover { background: var(--bg-hover); color: var(--text); }
.side-mini.danger:hover { color: var(--prio-alta); }

/* popmenus (ações de lista, dropdown do sino) */
.popmenu {
  display: none; position: absolute; z-index: 40; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 6px;
}
.popmenu.open { display: block; }
.list-menu { top: 100%; right: 6px; min-width: 168px; }
.list-menu form { display: flex; gap: 4px; margin-bottom: 4px; }
.list-menu form input {
  flex: 1; min-width: 0; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-side); color: var(--text); font: inherit; font-size: 12px;
}
.list-menu form button, .pop-item {
  border: none; background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; text-align: left; width: 100%;
}
.list-menu form button { width: auto; background: var(--accent); color: #fff; font-weight: 600; }
.pop-item:hover { background: var(--bg-hover); }
.pop-item.danger { color: var(--prio-alta); }

/* ══════════ Fase 2 — sino de notificações ══════════ */
.bell-wrap { position: relative; }
.bell-btn {
  position: relative; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--text-2); cursor: pointer; font-size: 16px;
  display: grid; place-items: center;
}
.bell-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.bell-badge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--prio-alta); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
/* O atributo `hidden` é display:none na folha do NAVEGADOR, e estilo de autor vence:
   o `display: grid` acima o anulava e o badge nunca sumia — com 0 não lidas sobrava uma
   bolinha vermelha vazia, mentindo que havia notificação. Reafirmar aqui é obrigatório
   sempre que a classe define `display` (o mesmo já é feito em .help-tour-btn e .ob-card). */
.bell-badge[hidden] { display: none; }
/* 400px: o reminder tem 4 ações (Concluir/Adiar/Focar/Dispensar) e a 360px elas
   quebravam em linhas irregulares. max-width protege telas estreitas. */
.notif-drop { top: calc(100% + 8px); right: 0; width: 400px; max-width: 90vw; padding: 0; }
.notif-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.notif-head b { font-size: 13.5px; }
.notif-count { color: var(--text-3); font-size: 11.5px; }
.notif-head .linkbtn { margin-left: auto; }
.linkbtn { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.linkbtn:hover { text-decoration: underline; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-page .notif-list { max-height: none; }
.notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.notif.unread { background: var(--accent-soft); }
.notif-ico { font-size: 16px; flex: none; }
.notif-body { flex: 1; min-width: 0; }
/* texto e horário na MESMA linha; assim a fila de ações abaixo usa a largura toda */
.notif-head-row { display: flex; gap: 8px; align-items: baseline; }
.notif-head-row .notif-txt { flex: 1; min-width: 0; }
.notif-txt { color: var(--text); }
.notif-txt b { font-weight: 650; }
/* a tarefa a que a notificação se refere: é o dado que decide a ação, então tem peso */
.notif-target {
  margin-top: 2px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.notif time { color: var(--text-3); font-size: 11px; flex: none; }
.notif-page { border: 1px solid var(--line); border-radius: 10px; margin: 12px 16px; background: var(--bg); overflow: hidden; }

/* ══════════ Fase 2 — colaboração (detalhe da lista) ══════════ */
.list-split { display: flex; flex: 1; min-height: 0; }
.list-tasks { flex: 1; min-width: 0; overflow-y: auto; }
.list-collab { width: 320px; flex: none; border-left: 1px solid var(--line); padding: 14px 16px; overflow-y: auto; background: var(--bg-side); }
.members h4.sect { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.member-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.member-row .m-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.member-row .m-info b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-perm select, .assign-form select, .share-row select {
  padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-card);
  color: var(--text); font: inherit; font-size: 12px;
}
.perm-tag { font-size: 11.5px; color: var(--text-3); text-transform: capitalize; }
.share-form { margin-top: 14px; }
.share-form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 600; margin-bottom: 6px; }
.share-row { display: flex; gap: 6px; flex-wrap: wrap; }
.share-row select { flex: 1; min-width: 90px; }
.assign-form { display: inline-flex; }
.assign-form select { max-width: 150px; }
@media (max-width: 900px) { .list-collab { width: 260px; } }
@media (max-width: 640px) { .list-split { flex-direction: column; } .list-collab { width: auto; border-left: none; border-top: 1px solid var(--line); } }

/* ══════════ Fase 2 — TAREFAS (coluna central, entrada rápida, detalhe) ══════════ */
/* view central */
.tasks-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tasks-scroll { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.main-head .count { color: var(--text-3); font-weight: 500; font-size: 13px; }
.main-head .head-icon { font-size: 16px; }

/* entrada rápida — agora um form real */
.qa { margin: 12px 16px 4px; }
.qa form { display: flex; gap: 8px; align-items: stretch; }
.qa input[type=text] {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-card); color: var(--text); font: inherit; font-size: 13.5px;
}
.qa input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.qa button {
  flex: none; padding: 0 16px; border: none; border-radius: 8px; background: var(--accent);
  color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.qa button:hover { filter: brightness(1.06); }
.qa .qa-hint { margin: 6px 2px 0; font-size: 11.5px; color: var(--text-3); }
.qa .qa-hint b { color: var(--text-2); font-weight: 500; }

/* linha de tarefa — indicadores e checkbox clicável */
.task .cb { cursor: pointer; }
.task .cb:hover { border-color: var(--accent); }
.t-title .t-open { cursor: pointer; }
.t-meta .ind { color: var(--text-3); }
.t-meta .sub { color: var(--text-2); }
.task.leaving { opacity: 0; transform: translateX(6px); }
@media (prefers-reduced-motion: no-preference) {
  .task { transition: background .12s, opacity .18s ease, transform .18s ease; }
}
.group + .group { margin-top: 16px; }
.group.overdue > h4 { color: var(--prio-alta); }

/* estado vazio da coluna */
.tasks-empty { text-align: center; color: var(--text-2); padding: 48px 24px; }
.tasks-empty .big { font-size: 34px; margin-bottom: 8px; }
.tasks-empty h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); }
.tasks-empty p { margin: 0; font-size: 13px; }

/* ── drawer de detalhe (criado sob demanda pelo tm.js) ── */
.task-drawer { position: fixed; inset: 0; z-index: 55; display: none; }
.task-drawer.open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(16,24,40,.28); }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 380px; max-width: 94vw;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(16,24,40,.14);
  display: flex; flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .drawer-panel { transform: translateX(100%); transition: transform .18s ease; }
  .task-drawer.open .drawer-panel { transform: translateX(0); }
}
.drawer-body { flex: 1; overflow-y: auto; }
.drawer-body:focus { outline: none; }

/* cabeçalho do detalhe */
.td { padding: 14px 16px; }
.td-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.td-head .row1 { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; flex-wrap: wrap; }
.td-head .row1 .due { color: var(--accent); font-weight: 600; }
.td-head .row1 .due.overdue { color: var(--prio-alta); }
.td-close { margin-left: auto; border: none; background: transparent; color: var(--text-3); cursor: pointer;
  width: 30px; height: 30px; border-radius: 7px; font-size: 16px; display: grid; place-items: center; flex: none; }
.td-close:hover { background: var(--bg-hover); color: var(--text); }
.td-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.td-status.done { color: var(--ok); }

/* checklist (subtarefas) e progresso no detalhe */
.td .prog { height: 5px; }
.td-check { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 13px; }
.td-check button.cbx {
  flex: none; width: 15px; height: 15px; margin-top: 2px; border-radius: 4px; cursor: pointer;
  border: 1.6px solid var(--prio-nenhuma); background: transparent; padding: 0; position: relative;
}
.td-check.on button.cbx { background: var(--ok); border-color: var(--ok); }
.td-check.on button.cbx::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 10px; line-height: 13px; text-align: center; }
.td-check.on span { color: var(--text-3); text-decoration: line-through; }

/* form de edição do detalhe */
.td-form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); font-weight: 600; margin: 12px 0 5px; }
.td-form input[type=text], .td-form input[type=date], .td-form input[type=datetime-local],
.td-form textarea, .td-form select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-side); color: var(--text); font: inherit; font-size: 13px;
}
.td-form textarea { min-height: 64px; resize: vertical; }
.td-form .two { display: flex; gap: 8px; }
.td-form .two > div { flex: 1; min-width: 0; }
.td-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.td-actions .btn { margin: 0; width: auto; flex: 1; }
.td-del { border: 1px solid var(--line); background: var(--bg-card); color: var(--prio-alta);
  border-radius: 7px; padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.td-del:hover { background: rgba(224,49,49,.1); border-color: var(--prio-alta); }

/* seções do detalhe: chips, kv, atividades, comentários */
.td-sect { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.td-sect h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.td .kv { align-items: baseline; }
.td .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.comment { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.comment:last-of-type { border-bottom: none; }
.comment .who { font-weight: 650; color: var(--text-2); font-size: 11.5px; }
.comment time { color: var(--text-3); font-size: 11px; margin-left: 6px; }
.comment-form { display: flex; gap: 6px; margin-top: 8px; }
.comment-form input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg-side); color: var(--text); font: inherit; font-size: 12.5px; }
.comment-form button { flex: none; border: none; border-radius: 7px; background: var(--accent);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; padding: 0 12px; cursor: pointer; }
.pchip { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 9px; }
.pchip.p5 { background: rgba(224,49,49,.15); color: var(--prio-alta); }
.pchip.p3 { background: rgba(245,159,0,.16); color: var(--prio-media); }
.pchip.p1 { background: var(--accent-soft); color: var(--accent); }
.pchip.p0 { background: var(--bg-hover); color: var(--text-3); }

/* ══════════ Gestão humana (Admin/Agentes/Config) + menu do avatar ══════════ */
/* container trocável das telas de gestão (w_layout) — ocupa a área principal */
.w-content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.w-content > .frame { flex: 1; border: none; border-radius: 0; box-shadow: none; min-height: 0; }
.w-content .stats-body { overflow-y: auto; }

/* menu do avatar ancorado na topbar (abre abaixo-à-esquerda, não à direita) */
.topbar .rail-user-wrap { margin-bottom: 0; }
.topbar .user-menu { left: auto; right: 0; top: calc(100% + 8px); }
.user-menu a { display: flex; align-items: center; gap: 9px; width: 100%; text-decoration: none;
  color: var(--text); font-size: 13.5px; padding: 7px 9px; border-radius: 6px; }
.user-menu a:hover { background: var(--bg-hover); }
.user-menu a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* botão que parece link (ações de tabela/linha, dentro de <form> inline) */
.linklike { border: none; background: transparent; color: var(--accent); font: inherit;
  font-size: inherit; cursor: pointer; padding: 0; }
.linklike:hover { text-decoration: underline; }
.linklike.danger { color: var(--prio-alta); }
.rowact .linklike { font-size: 12px; }
.tool-chip.linklike { border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px;
  background: var(--bg-card); text-decoration: none; }
.tool-chip.linklike:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

/* avatar-edit dentro de owner-card (edição de usuário) */
.avatar-edit .mini img { border-radius: 50%; }

/* Notas & Anexos (spec 08 §5.2) — painel de anexos + conversão no drawer */
.att { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.att:last-of-type { border-bottom: none; }
.att-ic { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.att-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.att-name { color: var(--accent); text-decoration: none; word-break: break-word; }
.att-name:hover { text-decoration: underline; }
.att-meta { font-size: 11px; color: var(--text-3); }
.att-thumb { max-width: 160px; max-height: 120px; border-radius: 6px; margin-top: 4px; border: 1px solid var(--line); }
.att-audio { width: 100%; margin-top: 4px; }
.att-upload { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.att-upload input[type=file] { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.linkbtn.danger { color: var(--danger, #d33); }
.conv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conv-kind { font-size: 13px; }