:root{
    --bg: #0F1119;
    --bg-grad: radial-gradient(circle at 15% -10%, #1c2137 0%, #0F1119 55%);
    --surface: #171B27;
    --surface2: #1E2333;
    --surface3: #252B40;
    --border: #2A3044;
    --text: #EEF0F5;
    --muted: #9297AD;
    --faint: #5B6180;
    --gold: #E8B34E;
    --gold-soft: rgba(232,179,78,0.14);
    --green: #4CC38A;
    --green-soft: rgba(76,195,138,0.14);
    --red: #E8615A;
    --red-soft: rgba(232,97,90,0.14);
    --blue: #6C8EEF;
    --blue-soft: rgba(108,142,239,0.14);
    --purple: #A78BFA;
    --purple-soft: rgba(167,139,250,0.14);
    --gray: #6B7290;
    --gray-soft: rgba(107,114,144,0.14);
    --radius: 16px;
    --radius-sm: 10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background: var(--bg-grad);
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    padding: 40px 5vw 80px;
    -webkit-font-smoothing: antialiased;
  }
  .mono{ font-family: 'JetBrains Mono', monospace; }

  header{
    display:flex; justify-content:space-between; align-items:flex-end;
    flex-wrap: wrap; gap: 20px;
    margin-bottom: 36px;
    max-width: 1320px; margin-left:auto; margin-right:auto;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.16em;
    color: var(--gold); text-transform:uppercase; margin-bottom:10px; display:block;
  }
  h1{ font-family:'Fraunces', serif; font-weight:700; font-size: clamp(28px, 3.4vw, 42px); letter-spacing:-0.01em; line-height:1.05; }
  h1 em{ font-style: italic; font-weight:500; color: var(--muted); }
  .header-sub{ color: var(--muted); font-size:14px; margin-top:8px; max-width:480px; line-height:1.5; }
  .header-actions{ display:flex; gap:10px; align-items:center; }
  .btn-primary{
    background: linear-gradient(135deg, var(--gold), #d99a2e);
    color: #1a1200; border:none; font-weight:700; font-size:14px;
    padding: 13px 22px; border-radius: 999px; cursor:pointer;
    display:flex; align-items:center; gap:8px;
    box-shadow: 0 8px 24px -8px rgba(232,179,78,0.5);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px -6px rgba(232,179,78,0.6); }
  .btn-icon-secondary{
    background: var(--surface2); border:1px solid var(--border); color: var(--muted);
    width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:17px;
    display:flex; align-items:center; justify-content:center; transition: all .15s ease;
  }
  .btn-icon-secondary:hover{ color: var(--gold); border-color: var(--gold); }

  .wrap{ max-width:1320px; margin:0 auto; }
  .shared-note{
    font-family:'JetBrains Mono'; font-size:11px; color: var(--faint); text-align:right; margin-top:6px;
  }

  .stats{ display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; margin-bottom: 28px; }
  .stat-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
  .stat-card .num{ font-family:'Fraunces', serif; font-weight:700; font-size:28px; line-height:1; }
  .stat-card .lbl{ font-size:11.5px; color: var(--muted); margin-top:8px; letter-spacing:0.02em; }
  .stat-card.accent-rodando .num{ color: var(--green); }
  .stat-card.accent-andamento .num{ color: var(--gold); }
  .stat-card.accent-standby .num{ color: var(--blue); }
  .stat-card.accent-pausado .num{ color: var(--red); }
  .stat-card.accent-prioridade .num{ color: var(--purple); }

  .nicho-strip{
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 28px;
  }
  .nicho-chip{
    font-family:'JetBrains Mono'; font-size:11.5px; padding:7px 14px; border-radius:999px;
    background: var(--surface); border:1px solid var(--border); color: var(--muted); cursor:pointer;
    display:flex; gap:7px; align-items:center; transition: all .15s ease;
  }
  .nicho-chip:hover{ border-color: var(--gold); color: var(--text); }
  .nicho-chip.active{ background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
  .nicho-chip b{ font-family:'Inter'; }

  .funnel-section{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 26px 28px 18px; margin-bottom: 28px; }
  .funnel-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; flex-wrap:wrap; gap:8px;}
  .funnel-head h2{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; }
  .funnel-head .hint{ font-size:12px; color:var(--faint); }
  .funnel-clear{ font-family:'JetBrains Mono'; font-size:11px; color:var(--gold); background:none; border:1px solid var(--gold); border-radius:999px; padding:4px 10px; cursor:pointer; display:none; }
  .funnel-clear.show{ display:inline-block; }
  #funnelSvgWrap{ width:100%; overflow-x:auto; }
  .funnel-seg{ cursor:pointer; transition: opacity .15s ease; }
  .funnel-seg:hover{ opacity:0.85; }
  .funnel-seg.dim{ opacity:0.25; }
  .funnel-seg text{ pointer-events:none; }

  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; align-items:center; }
  .filters input[type="text"], .filters select{
    background: var(--surface2); border:1px solid var(--border); color: var(--text);
    font-family:'Inter'; font-size:13.5px; padding:10px 14px; border-radius:999px; outline:none; min-width: 140px;
  }
  .filters input[type="text"]{ min-width: 210px; }
  .filters select{ cursor:pointer; }
  .filters input:focus, .filters select:focus{ border-color: var(--gold); }
  .filter-count{ margin-left:auto; font-size:12.5px; color:var(--faint); font-family:'JetBrains Mono'; }

  .list{ display:flex; flex-direction:column; gap:12px; }
  .card{
    background: var(--surface); border:1px solid var(--border); border-left: 3px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px; transition: border-color .15s ease;
  }
  .card:hover{ border-color: #3a4260; border-left-color: #3a4260; }
  .card.prio-alta{ border-left-color: var(--purple); }
  .card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
  .card-id{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .card-id h3{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; }
  .tag{ font-size:11px; font-family:'JetBrains Mono'; padding:3px 10px; border-radius:999px; background: var(--surface3); color: var(--muted); border:1px solid var(--border); white-space:nowrap; }
  .badge{ font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:0.02em; white-space:nowrap; }
  .badge-nao_iniciado{ background: var(--gray-soft); color: var(--gray); }
  .badge-em_andamento{ background: var(--gold-soft); color: var(--gold); }
  .badge-standby{ background: var(--blue-soft); color: var(--blue); }
  .badge-pausado{ background: var(--red-soft); color: var(--red); }
  .badge-rodando{ background: var(--green-soft); color: var(--green); }
  .badge-prio-alta{ background: var(--purple-soft); color: var(--purple); }
  .badge-prio-media{ background: var(--blue-soft); color: var(--blue); }
  .badge-prio-baixa{ background: var(--gray-soft); color: var(--gray); }

  .card-actions{ display:flex; gap:6px; }
  .icon-btn{ background:none; border:1px solid var(--border); color: var(--muted); width:32px; height:32px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .15s ease; }
  .icon-btn:hover{ border-color: var(--gold); color: var(--gold); }
  .icon-btn.danger:hover{ border-color: var(--red); color: var(--red); }

  .card-meta{ display:flex; gap:20px; margin-top:10px; flex-wrap:wrap; font-size:12.5px; color: var(--muted); }
  .card-meta b{ color: var(--text); font-weight:600; }
  .acordo-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); font-size:11.5px; }
  .acordo-pill.bet{ color: var(--green); border-color: rgba(76,195,138,0.3); }
  .acordo-pill.info{ color: var(--gold); border-color: rgba(232,179,78,0.3); }

  .progress-row{ display:flex; align-items:center; gap:12px; margin-top:16px; }
  .progress-track{ flex:1; height:8px; background: var(--surface3); border-radius: 999px; overflow:hidden; }
  .progress-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--gold), var(--green)); transition: width .3s ease; }
  .progress-pct{ font-family:'JetBrains Mono'; font-size:13px; font-weight:700; width:44px; text-align:right; }

  .stages-row{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .stage-chip{
    display:flex; align-items:center; gap:7px; font-size:12px; padding:6px 11px 6px 8px;
    border-radius:999px; border:1px solid var(--border); background: var(--surface2); cursor:pointer;
    user-select:none; color: var(--faint); transition: all .15s ease;
  }
  .stage-chip:hover{ border-color: var(--gold); }
  .stage-chip.done{ background: var(--green-soft); border-color: transparent; color: var(--green); font-weight:600; }
  .stage-dot{ width:8px; height:8px; border-radius:50%; background: var(--faint); flex-shrink:0; }
  .stage-chip.done .stage-dot{ background: var(--green); }
  .stage-chip .stage-resp{ opacity:0.75; font-weight:400; }

  .empty{ text-align:center; padding: 70px 20px; color: var(--faint); background: var(--surface); border:1px dashed var(--border); border-radius: var(--radius); }
  .empty .display{ font-family:'Fraunces', serif; font-size:20px; color: var(--muted); margin-bottom:8px; }

  .modal-backdrop{ position:fixed; inset:0; background: rgba(8,9,14,0.72); backdrop-filter: blur(3px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
  .modal-backdrop.open{ display:flex; }
  .modal{ background: var(--surface2); border:1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 88vh; overflow-y:auto; padding: 28px 30px 30px; }
  .modal h2{ font-family:'Fraunces', serif; font-size:22px; margin-bottom:20px; }
  .modal h4{ font-size:12.5px; color: var(--gold); letter-spacing:0.04em; text-transform:uppercase; margin: 22px 0 10px; font-family:'JetBrains Mono'; }
  .modal h4:first-of-type{ margin-top:4px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; color: var(--muted); margin-bottom:6px; letter-spacing:0.02em; }
  .field input, .field select, .field textarea{
    width:100%; background: var(--surface); border:1px solid var(--border); color: var(--text);
    font-family:'Inter'; font-size:14px; padding:11px 13px; border-radius: var(--radius-sm); outline:none;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); }
  .field textarea{ resize:vertical; min-height:56px; }
  .field-row{ display:flex; gap:12px; }
  .field-row .field{ flex:1; }

  .acordo-block{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom:12px; }
  .acordo-block-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
  .acordo-block-head input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--gold); }
  .acordo-block-head label{ font-size:13.5px; font-weight:600; }

  .stage-row{ display:flex; gap:10px; align-items:center; background: var(--surface); border:1px solid var(--border); padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom:8px; }
  .stage-row input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--gold); flex-shrink:0; }
  .stage-row .stage-name{ font-size:13px; flex: 0 0 190px; }
  .stage-row input[type="text"]{ flex:1; background: var(--surface3); border:1px solid var(--border); color: var(--text); font-size:12.5px; padding:7px 10px; border-radius:8px; outline:none; }
  .stage-row input[type="text"]:focus{ border-color: var(--gold); }

  .modal-footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
  .btn-ghost{ background:none; border:1px solid var(--border); color: var(--muted); font-size:13.5px; font-weight:600; padding: 11px 20px; border-radius:999px; cursor:pointer; }
  .btn-ghost:hover{ color: var(--text); border-color: var(--muted); }

  .team-row{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
  .team-row span{ flex:0 0 200px; font-size:13px; color: var(--muted); }
  .team-row input{ flex:1; background: var(--surface); border:1px solid var(--border); color: var(--text); font-size:13px; padding:9px 12px; border-radius:8px; outline:none; }

  #loadingState{ text-align:center; padding:80px 0; color: var(--faint); font-family:'JetBrains Mono'; font-size:13px; }

  @media (max-width: 900px){ .stats{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px){
    .stats{ grid-template-columns: repeat(2, 1fr); }
    body{ padding: 28px 4vw 60px; }
    .stage-row{ flex-wrap:wrap; }
    .stage-row .stage-name{ flex: 1 1 100%; }
  }