:root{
  --tone-cream:#fefcfb;
  --tone-sky:#1282a2;
  --tone-ocean:#034078;
  --tone-deep:#001f54;
  --tone-night:#0a1128;

  --font-base:"Manrope", "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-display:"Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif;
  --night:var(--tone-night);
  --night-2:var(--tone-deep);
  --ink:var(--tone-cream);
  --muted:color-mix(in srgb, var(--tone-cream) 64%, var(--tone-sky) 36%);
  --blue:var(--tone-sky);
  --cyan:var(--tone-ocean);
  --teal:color-mix(in srgb, var(--tone-sky) 45%, var(--tone-cream) 55%);
  --bee:var(--tone-sky);
  --bee-200:color-mix(in srgb, var(--tone-sky) 70%, var(--tone-cream) 30%);
  --tbl-header:var(--tone-deep);
  --tbl-header-text:var(--tone-cream);
  --tbl-surface:rgba(0,31,84,.78);
  --tbl-border:rgba(254,252,251,.12);
  --tbl-row:rgba(254,252,251,.03);
  --tbl-row-alt:rgba(18,130,162,.08);
  --tbl-row-hover:rgba(18,130,162,.16);
  --tbl-muted:color-mix(in srgb, var(--tone-cream) 74%, var(--tone-sky) 26%);
  --bg:
    radial-gradient(1100px 520px at 8% -14%, rgba(18,130,162,.14), transparent),
    radial-gradient(900px 480px at 92% -8%, rgba(3,64,120,.12), transparent),
    linear-gradient(180deg, var(--tone-night), var(--tone-deep) 60%, var(--tone-night));
  --surface:color-mix(in srgb, var(--tone-deep) 82%, var(--tone-cream) 18%);
  --border:rgba(254,252,251,.14);
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(254,252,251,.04);
  --radius:16px;
  --pad:26px;
  --fs-body:18px;
  --fs-h1:34px;
  --fs-h2:20px;
  --fs-table:15px;
  --fs-table-small:12.5px;
  --tbl-pill-h:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  max-width:1800px;
  margin-inline:auto;
  padding:40px 20px 72px;
}
@media (min-width:1600px){
  .container{ max-width:1900px }
}
.page-header{ margin-bottom:18px }
.titulo{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--ink);
}
.subtitulo{ margin:0; color:var(--muted) }

.card{
  background:linear-gradient(180deg, rgba(254,252,251,.05), rgba(3,64,120,.22));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--pad);
  backdrop-filter:saturate(110%) blur(6px);
  position:relative;
}

.toolbar{ display:grid; gap:24px; margin-bottom:20px }
.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:18px;
}
.kpi{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(18,130,162,.18) 0%, rgba(3,64,120,.36) 60%, rgba(0,31,84,.52) 100%);
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(0,17,40,.45);
  overflow:hidden;
  backdrop-filter:saturate(130%) blur(10px);
  -webkit-backdrop-filter:saturate(130%) blur(10px);
}
.kpi::after{
  content:""; position:absolute; inset:1px;
  border-radius:16px;
  border:1px solid rgba(254,252,251,.08);
  pointer-events:none;
}
.kpi-icon{
  flex:0 0 42px;
  height:42px; width:42px;
  border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(18,130,162,.4), rgba(18,130,162,.18));
  color:var(--ink);
  font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(254,252,251,.12);
}
.kpi-body{ display:flex; flex-direction:column; gap:4px }
.kpi .kpi-label{
  font-size:11px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 64%, var(--blue) 36%);
}
.kpi .kpi-value{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:800;
  letter-spacing:.1px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.kpi .kpi-meta{
  font-size:12px;
  color:color-mix(in srgb, var(--ink) 58%, var(--blue) 42%);
}

.filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(254,252,251,.06), rgba(0,31,84,.45));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:saturate(130%) blur(10px);
  -webkit-backdrop-filter:saturate(130%) blur(10px);
}
.filters > *{ flex:0 0 auto }
.filters .group{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 260px;
  min-width:220px;
}
.filters .group i{
  position:absolute;
  left:14px;
  font-size:18px;
  color:color-mix(in srgb, var(--ink) 54%, var(--blue) 46%);
}

#f-q{
  padding:12px 16px 12px 46px;
  width:100%;
}
select{ padding:12px 14px }

select option{ color:var(--tone-night); background:var(--tone-cream) }
.btn{
  padding:12px 18px;
  min-height:44px;
  cursor:pointer;
  font-weight:700;
  border-radius:14px;
  border:1px solid rgba(254,252,251,.12);
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ filter:brightness(1.1); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn.ghost{
  background:rgba(254,252,251,.05);
  border:1px solid var(--border);
  color:color-mix(in srgb, var(--ink) 70%, var(--blue) 30%);
  box-shadow:inset 0 0 0 1px rgba(254,252,251,.08);
}


select, #f-q{
  border-radius:12px;
  background:rgba(254,252,251,.06);
  color:var(--ink);
  border:1px solid var(--border);
}

#f-q::placeholder, input::placeholder, textarea::placeholder{ color:color-mix(in srgb, var(--ink) 68%, var(--blue) 32%); opacity:.7 }
.btn.primary{
  background:linear-gradient(120deg, #1282a2, #034078);
  border-color:transparent; color:var(--ink);
  box-shadow:0 10px 24px rgba(18,130,162,.38);
}
.btn.primary:hover{ filter:brightness(1.06) }
.filters select,
.filters .btn,
.filters #f-q{
  background:rgba(254,252,251,.06);
  border:1px solid var(--border);
  color:var(--ink);
}
.filters select{ min-width:160px }
.filters .btn{ min-width:112px }
.filters .btn.primary{ box-shadow:0 12px 28px rgba(18,130,162,.4) }
.filters .btn.ghost:hover{ box-shadow:0 12px 24px rgba(0,0,0,.24) }
.split{
  width:1px; height:32px;
  background:rgba(254,252,251,.12);
  margin-inline:6px;
}
.filters-hotkeys{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:color-mix(in srgb, var(--ink) 56%, var(--blue) 44%);
}
.filters-hotkeys::before{
  content:"Atalhos:";
  font-weight:600;
  letter-spacing:.2px;
  color:color-mix(in srgb, var(--ink) 74%, var(--blue) 26%);
}
.filters-hotkeys kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(0,31,84,.6);
  border:1px solid rgba(254,252,251,.18);
  font-size:11px;
  line-height:1;
  color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.32);
}
.filters-hotkeys span{ color:color-mix(in srgb, var(--ink) 60%, var(--blue) 40%) }
.result-count{
  margin-left:12px;
  font-size:12.5px;
  color:color-mix(in srgb, var(--ink) 58%, var(--blue) 42%);
  padding-inline:2px;
}

@media (max-width:980px){
  .kpi{ padding:16px 18px; gap:12px }
  .kpi-icon{ height:38px; width:38px; border-radius:12px; font-size:18px }
  .kpi .kpi-value{ font-size:24px }
}
@media (max-width:780px){
  .filters{ padding:12px }
  .filters-hotkeys{
    order:98;
    margin-left:0;
    width:100%;
    margin-top:6px;
  }
  .filters .result-count{
    order:99;
    margin-left:0;
    width:100%;
    margin-top:6px;
    text-align:left;
  }
  .filters .split{ display:none }
}

.table-responsive{
  position:relative;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  margin-top:16px;
  border:1px solid var(--tbl-border);
  border-radius:18px;
  background:var(--tbl-surface);
  box-shadow:0 22px 48px rgba(0,17,40,.5);
}
.tabela-comercial{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:1024px;  
  color:var(--ink);
  font-size:var(--fs-table);
}
.tabela-comercial caption{
  font-family:var(--font-display);
  padding:20px 24px;
  text-align:left;
  font-size:var(--fs-table-small);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.45px;
  color:color-mix(in srgb, var(--ink) 70%, var(--blue) 30%);
  background:linear-gradient(120deg, rgba(0,31,84,.9), rgba(10,17,40,.82));
  border-bottom:1px solid var(--tbl-border);
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}
.tabela-comercial thead th{
  position:sticky; top:0; z-index:2;
  background:var(--tbl-header);
  color:var(--tbl-header-text);
  text-align:left;
  font-size:var(--fs-table-small);
  font-weight:800;
  letter-spacing:.45px;
  text-transform:uppercase;
  padding:14px 14px;
  white-space:nowrap;
  border-bottom:1px solid var(--tbl-border);
  backdrop-filter:saturate(120%) blur(4px);
  -webkit-backdrop-filter:saturate(120%) blur(4px);
  box-shadow: 0 1px 0 rgba(254,252,251,.04), 0 6px 22px rgba(0,17,40,.32);
}
.tabela-comercial thead th:first-child{ border-top-left-radius:12px }
.tabela-comercial thead th:last-child{ border-top-right-radius:12px }
.tabela-comercial tbody td{
  padding:18px 16px;
  border-top:1px solid var(--tbl-border);
  vertical-align:middle;
}
.tabela-comercial tbody td:first-child{ font-weight:700; color:color-mix(in srgb, var(--ink) 88%, var(--blue) 12%) }
.tabela-comercial tbody tr{ transition: background 160ms ease }
.tabela-comercial tbody tr:nth-child(odd){ background:var(--tbl-row) }
.tabela-comercial tbody tr:nth-child(even){ background:var(--tbl-row-alt) }
.tabela-comercial tbody tr:hover{
  background:var(--tbl-row-hover);
}
.tabela-comercial tbody td:first-child{ position:relative }
.tabela-comercial tbody tr:hover:not(.topline) td:first-child::before{
  content:""; position:absolute; left:-2px; top:8px; bottom:8px; width:3px;
  border-radius:2px; background:var(--blue);
}
.tabela-comercial tbody tr:last-child td:first-child{ border-bottom-left-radius:12px }
.tabela-comercial tbody tr:last-child td:last-child{ border-bottom-right-radius:12px }


.tabela-comercial thead th:nth-child(5),
.tabela-comercial tbody td:nth-child(5){
  text-align:center;
  
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing:0;
  font-weight:700;
  color:var(--ink);
}
.tabela-comercial thead th:nth-child(5){
  text-align:center;
  width:120px; 
}

.badge,
.tag,
.status{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--tbl-pill-h);
  padding:6px 12px;
  border-radius:999px;
  font-weight:700; font-size:var(--fs-table-small); letter-spacing:.2px;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  background:rgba(254,252,251,.08);
  box-shadow:
    inset 0 0 0 1px rgba(254,252,251,.12),
    0 1px 0 rgba(254,252,251,.03),
    0 8px 16px rgba(0,0,0,.20);
}
.badge i, .tag i, .status i{ font-size:14px; opacity:.95 }
.etapa-prospeccao{ background:rgba(18,130,162,.18); color:var(--ink) }
.etapa-reuniao{    background:rgba(18,130,162,.24); color:var(--ink) }
.etapa-proposta{   background:rgba(18,130,162,.14); color:var(--ink) }
.etapa-fechado{    background:rgba(3,64,120,.28); color:var(--ink) }

.tag{ color:color-mix(in srgb, var(--ink) 78%, var(--blue) 22%) }
.constancia.baixa{ color:color-mix(in srgb, var(--ink) 82%, var(--blue) 18%); border-color:rgba(18,130,162,.26); background:rgba(18,130,162,.16) }
.constancia.media{ color:color-mix(in srgb, var(--ink) 84%, var(--blue) 16%); border-color:rgba(18,130,162,.22); background:rgba(18,130,162,.12) }
.constancia.alta{ color:color-mix(in srgb, var(--ink) 88%, var(--blue) 12%); border-color:rgba(18,130,162,.18); background:rgba(18,130,162,.08) }

.status{
  font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
}
.status.pendente{ background:rgba(254,252,251,.08); color:var(--ink); border-color:transparent }
.status.negociacao{
  background:rgba(18,130,162,.24);
  color:color-mix(in srgb, var(--ink) 86%, var(--blue) 14%); border-color:rgba(18,130,162,.3)
}
.status.ganho{
  background:rgba(3,64,120,.28);
  color:color-mix(in srgb, var(--ink) 88%, var(--cyan) 12%); border-color:rgba(3,64,120,.34)
}
.status.perdido{
  background:rgba(10,17,40,.38);
  color:color-mix(in srgb, var(--ink) 90%, var(--cyan) 10%); border-color:transparent
}


.btn{ font-size:var(--fs-table-small); font-weight:700; min-height:42px }

.nota{
  margin-top:16px; color:var(--muted); font-size:14px;
  border-left:4px solid var(--cyan); padding-left:12px;
}


:focus-visible{ outline:none; outline-offset:0 }
select:focus, select:focus-visible,
button:focus, button:focus-visible,
input:focus, input:focus-visible,
.btn:focus, .btn:focus-visible,
#f-q:focus, #f-q:focus-visible{
  outline:none; box-shadow:none; border-color:var(--border);
}
.table-responsive:focus{ box-shadow:none; border-color:var(--tbl-border) }

.tabela-comercial tbody tr.topline{
  position:relative;
  background:transparent;
  z-index:0;
}
.tabela-comercial tbody tr.topline::after{
  content:"";
  position:absolute;
  inset:2px 0;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(18,130,162,.22), rgba(3,64,120,.26));
  box-shadow:0 12px 24px rgba(0,31,84,.28), inset 0 0 0 1px rgba(18,130,162,.35);
  pointer-events:none;
  z-index:-1;
}
.tabela-comercial tbody tr.topline td{
  position:relative;
  background:transparent;
}
.tabela-comercial tbody tr.topline td:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 16px;
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
.tabela-comercial tbody tr.topline td:last-child{
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}
.tabela-comercial tbody tr.topline td:first-child::before{
  content:"\1F451";
  font-size:18px;
  line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

@media (min-width:1024px) and (max-width:1366px) and (orientation:portrait){
  .container{ max-width:1200px; padding:34px 18px 64px }
  .titulo{ font-size:32px }
  .kpis{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
  #f-q{ width:100% }
  .filters{ gap:8px }
  .table-responsive{ max-height:70vh } 
}
@media (min-width:1180px) and (max-width:1366px) and (orientation:landscape){
  .container{ max-width:1300px; padding:34px 20px 64px }
  .kpis{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  .table-responsive{ max-height:70vh }
}

@media (min-width:768px) and (max-width:1180px){
  .kpis{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .toolbar{
    position:sticky; top:8px; z-index:50;
    background: rgba(10,17,40,.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
    isolation: isolate; 
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .toolbar{ background: rgba(10,17,40,.98) }
  }
  .table-responsive{ margin-top:8px }
}

@media (max-width:640px){
  :root{
    --fs-body:16px;
    --fs-h1:26px;
    --pad:18px;
  }
  .container{ padding:22px 12px 40px }
  .titulo{ font-size:var(--fs-h1) }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .kpi .kpi-value{ font-size:18px }
  #f-q{ width:100% }
  .filters{ gap:8px; flex-wrap:nowrap; overflow-x:auto }
  .btn, select, #f-q{ width:auto; flex:0 0 auto } 
  .split{ display:none }
  .table-responsive{
    border-radius:12px;
    max-height:62vh;
  }
  .tabela-comercial{ min-width:720px }
}
@media (max-width:380px){
  .kpis{ grid-template-columns:1fr 1fr }
  .kpi{ padding:12px }
  .tabela-comercial{ min-width:640px }
}
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; animation:none; transition:none }
}

/* Observations timeline refresh */
.observations{
  position:relative;
  margin-top:78px;
  padding:calc(var(--pad) * .85) clamp(24px, var(--pad), 48px);
  border-radius:28px;
  border:1px solid rgba(254,252,251,.16);
  background:linear-gradient(155deg, rgba(10,17,40,.92), rgba(3,64,120,.62));
  box-shadow:0 32px 72px rgba(0,0,0,.48);
  display:grid;
  gap:34px;
  overflow:hidden;
}
.observations::before{
  content:"";
  position:absolute;
  inset:-35% auto auto -18%;
  width:460px;
  height:460px;
  background:radial-gradient(circle at center, rgba(18,130,162,.42), transparent 68%);
  opacity:.75;
  pointer-events:none;
}
.observations::after{
  content:"";
  position:absolute;
  inset:auto -26% -32% auto;
  width:520px;
  height:520px;
  background:radial-gradient(circle at center, rgba(3,64,120,.34), transparent 70%);
  opacity:.8;
  pointer-events:none;
}
.observations-header{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:1;
}
.observations-header h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:24px;
  letter-spacing:.32px;
  color:var(--ink);
}
.observations-subtitle{
  margin:0;
  max-width:780px;
  font-size:15px;
  color:color-mix(in srgb, var(--ink) 64%, var(--blue) 36%);
}
.observations-list{
  position:relative;
  margin:0;
  padding:4px 0 0;
  list-style:none;
  display:grid;
  gap:22px;
  counter-reset:lead-count;
  z-index:1;
}
.observations-list::before{
  content:"";
  position:absolute;
  left:36px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, rgba(18,130,162,.42), rgba(10,17,40,.08));
}
.observation-item{
  position:relative;
  padding-left:94px;
  counter-increment:lead-count;
}
.observation-item::before{
  content:counter(lead-count, decimal-leading-zero);
  position:absolute;
  left:0;
  top:20px;
  width:64px;
  height:64px;
  border-radius:20px;
  border:1px solid rgba(254,252,251,.18);
  background:linear-gradient(150deg, rgba(18,130,162,.35), rgba(9,18,40,.85));
  box-shadow:0 14px 32px rgba(0,0,0,.38);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.4px;
  color:var(--tone-cream);
}
.observation-card{
  position:relative;
  display:grid;
  gap:18px;
  padding:24px 30px 26px;
  border-radius:24px;
  border:1px solid rgba(254,252,251,.14);
  background:linear-gradient(160deg, rgba(10,17,40,.88), rgba(18,130,162,.22));
  box-shadow:0 24px 52px rgba(0,0,0,.46);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.observation-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(18,130,162,.28), transparent 55%);
  opacity:.7;
  pointer-events:none;
}
.observation-card:hover{
  border-color:rgba(18,130,162,.46);
  box-shadow:0 28px 60px rgba(0,0,0,.5);
  transform:translateY(-2px);
}
.observation-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  z-index:1;
}
.observation-title{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.observation-lead-name{
  font-size:20px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:.22px;
}
.observation-company{
  font-size:13px;
  color:color-mix(in srgb, var(--ink) 60%, var(--blue) 40%);
}
.observation-meta{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  z-index:1;
}
.observation-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(254,252,251,.14);
  background:rgba(18,130,162,.2);
  color:color-mix(in srgb, var(--ink) 74%, var(--blue) 26%);
  font-size:12px;
  letter-spacing:.22px;
  box-shadow:inset 0 0 0 1px rgba(254,252,251,.05);
}
.observation-pill i{
  font-size:14px;
  color:var(--tone-cream);
  opacity:.8;
}
.observation-note-group{
  position:relative;
  display:grid;
  gap:8px;
  z-index:1;
}
.observation-note-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.42px;
  color:color-mix(in srgb, var(--ink) 72%, var(--blue) 28%);
}
.observation-note{
  min-height:130px;
  resize:vertical;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(254,252,251,.16);
  background:rgba(12,22,46,.78);
  color:var(--ink);
  font-family:var(--font-base);
  font-size:14px;
  line-height:1.55;
  transition:border-color .22s ease, box-shadow .22s ease;
}
.observation-note::placeholder{
  color:color-mix(in srgb, var(--ink) 50%, var(--blue) 50%);
}
.observation-note:focus,
.observation-note:focus-visible{
  outline:none;
  border-color:rgba(18,130,162,.5);
  box-shadow:0 0 0 2px rgba(18,130,162,.3);
}
.observation-jump{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid rgba(254,252,251,.18);
  background:linear-gradient(135deg, rgba(18,130,162,.38), rgba(0,31,84,.58));
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:.35px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, color .22s ease;
  white-space:nowrap;
}
.observation-jump i{ font-size:16px; }
.observation-jump:hover,
.observation-jump:focus-visible{
  transform:translateY(-1px);
  background:rgba(18,130,162,.46);
  color:var(--tone-cream);
}
.observation-empty,
.observation-empty-message{
  list-style:none;
  margin:0;
  padding:20px 24px 20px 62px;
  border-radius:20px;
  border:1px solid rgba(254,252,251,.12);
  background:rgba(10,17,40,.72);
  color:color-mix(in srgb, var(--ink) 62%, var(--blue) 38%);
  position:relative;
}
.observation-empty::before,
.observation-empty-message::before{
  content:"";
  position:absolute;
  left:20px;
  top:24px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(18,130,162,.38);
  border:1px solid rgba(254,252,251,.16);
}
@media (max-width:960px){
  .observations-list::before{ left:30px; }
  .observation-item{ padding-left:78px; }
  .observation-item::before{ width:56px; height:56px; border-radius:18px; font-size:14px; }
}
@media (max-width:640px){
  .observations{ padding:calc(var(--pad) * .7) 20px; margin-top:60px; }
  .observations-list::before{ display:none; }
  .observation-item{ padding-left:0; }
  .observation-item::before{ display:none; }
  .observation-card{ padding:18px 18px 22px; }
  .observation-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .observation-jump{ width:100%; justify-content:center; }
}