:root{
  --bg:#eef1ef;
  --bg-deep:#e2e8e4;
  --ink:#182226;
  --ink-soft:#4c5b60;
  --primary:#0e5a67;
  --primary-dark:#0a3f49;
  --primary-tint:#d8e9ea;
  --accent:#e8611e;
  --accent-tint:#fce3d4;
  --line:#c7d0cb;
  --line-soft:#dbe2dd;
  --plate:#fbfcfa;
  --white:#ffffff;
  --ok:#2f7a4f;
  --ok-tint:#e1f0e5;
  --partial:#b9790f;
  --partial-tint:#fbecd2;
  --pending:#6b7680;
  --pending-tint:#e7eae9;
  --shadow: 0 1px 2px rgba(15,30,32,.06), 0 6px 20px -8px rgba(15,30,32,.18);
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3,.display{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--primary-dark);
  margin:0;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:600;
}
a{color:inherit;}
button{font-family:inherit;}

/* ---------- Ruler divider (signature) ---------- */
.ruler{
  height:22px;
  margin:0 0 28px 0;
  background-image:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 8px);
  background-position: 0 100%, 0 100%;
  background-size: 100% 14px, 100% 7px;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--ink);
  opacity:.55;
}

/* ---------- Header ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--primary-dark);
  color:#eef4f3;
  border-bottom:3px solid var(--accent);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0;}
.brand-text{min-width:0;}
.brand-mark{
  width:38px;height:38px;border-radius:8px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px; color:#fff;
  border:2px solid #fff3;
  flex-shrink:0;
}
.logo-chip{
  background:#fff; border-radius:10px; padding:6px 12px; flex-shrink:0;
  display:flex; align-items:center; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.logo-chip img{height:30px; width:auto; display:block;}
@media (max-width:640px){ .logo-chip img{height:24px;} .logo-chip{padding:5px 9px;} }
.brand-text .name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.02em;line-height:1;}
.brand-text .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:#9fc3c5;text-transform:uppercase;margin-top:3px;line-height:1.35;max-width:340px;}
@media (max-width:640px){.brand-text .tag{font-size:9px;max-width:220px;}}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.pill-btn{
  background:transparent;border:1px solid #ffffff33;color:#eef4f3;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:background .15s,border-color .15s;
}
.pill-btn:hover{background:#ffffff14;border-color:#ffffff66;}
.pill-btn.hidden{display:none;}

/* ---------- Layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px 80px;}
.view{display:none;}
.view.active{display:block;}

/* ---------- Hero / search ---------- */
.hero{
  background:linear-gradient(155deg, var(--primary-dark), var(--primary) 65%);
  border-radius:20px;
  padding:40px 36px;
  color:#eef6f5;
  position:relative;
  overflow:hidden;
  margin-bottom:30px;
  box-shadow:var(--shadow);
}
.hero::after{
  content:"";
  position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%;
  border:26px solid #ffffff12;
}
.hero::before{
  content:"";
  position:absolute; right:40px; bottom:-70px; width:160px; height:160px;
  border-radius:50%;
  border:18px solid #ffffff0d;
}
.hero-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a8d6d2;margin-bottom:10px;}
.hero h1{color:#fff;font-size:38px;line-height:1.02;max-width:640px;}
.hero p.lead{font-family:'Inter';font-weight:500;color:#d3e7e4;max-width:560px;margin:14px 0 26px;font-size:15px;line-height:1.55;text-transform:none;}
.search-box{
  background:#ffffff;
  border-radius:14px;
  padding:8px;
  display:flex; gap:8px; align-items:center;
  max-width:560px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35);
  position:relative;
  z-index:2;
}
.search-box input{
  flex:1; border:none; outline:none; padding:12px 14px; font-size:15px;
  font-family:'IBM Plex Mono',monospace; color:var(--ink); background:transparent; letter-spacing:.02em;
}
.search-box input::placeholder{color:#98a3a6; font-family:'Inter';}
.search-box button{
  background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:12px 20px; font-weight:700; font-size:14px; cursor:pointer;
  text-transform:uppercase; letter-spacing:.03em;
  transition:filter .15s;
  white-space:nowrap;
}
.search-box button:hover{filter:brightness(1.08);}
.search-hint{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#a8d6d2;margin-top:10px;letter-spacing:.02em;}
.search-error{
  display:none;
  background:#fff3ec;border:1px solid var(--accent);color:#7a3210;
  padding:12px 16px;border-radius:10px;font-size:13.5px;margin-top:14px;max-width:560px;
  font-weight:500;
}

/* ---------- KPI grid ---------- */
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:10px;
}
.kpi{
  background:var(--plate); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
  position:relative;
}
.kpi .k-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);}
.kpi .k-value{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;color:var(--primary-dark);margin-top:6px;letter-spacing:0;text-transform:none;}
.kpi .k-sub{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}
.kpi.accent{border-color:var(--accent);}
.kpi.accent .k-value{color:var(--accent);}
.kpi.warn{border-color:var(--partial);}
.kpi.warn .k-value{color:var(--partial);}
.kpi .k-corner.warn{background:var(--partial);}
.kpi .k-corner{
  position:absolute; top:12px; right:14px; width:8px; height:8px; border-radius:50%;
}
.kpi .k-corner.ok{background:var(--ok);}
.kpi .k-corner.accent{background:var(--accent);}

/* ---------- Section headers ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:38px 0 14px;flex-wrap:wrap;}
.section-head h2{font-size:24px;}
.section-head .section-note{font-size:12.5px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}

/* ---------- Chart ---------- */
.chart-card{
  background:var(--plate); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:22px 22px 14px; box-shadow:var(--shadow);
}
.chart-bars{display:flex; align-items:flex-end; gap:4px; height:150px; overflow-x:auto; padding-bottom:4px;}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:20px;flex:1;position:relative;}
.bar-col .bar{
  width:100%; max-width:18px; background:linear-gradient(180deg,var(--primary),var(--primary-dark));
  border-radius:4px 4px 0 0; transition:filter .15s; cursor:default;
}
.bar-col .bar:hover{filter:brightness(1.25);}
.bar-col .bar-label{font-size:9px;color:var(--ink-soft);margin-top:6px;font-family:'IBM Plex Mono',monospace;white-space:nowrap;transform:rotate(0deg);}
.bar-col[data-tip]{position:relative;}
.bar-col .tip{
  display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:11px;padding:5px 8px;border-radius:6px;white-space:nowrap;margin-bottom:6px;
  font-family:'IBM Plex Mono',monospace; z-index:5;
}
.bar-col:hover .tip{display:block;}

/* ---------- Ano a ano ---------- */
.ano-bars{height:170px;gap:0;justify-content:space-around;}
.ano-group{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:110px;flex:1;}
.ano-pair{display:flex;align-items:flex-end;gap:6px;height:100%;}
.ano-pair .bar-c{width:26px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--primary),var(--primary-dark));position:relative;}
.ano-pair .bar-e{width:26px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--accent),#b6440f);position:relative;}
.ano-pair .bar-c:hover .tip, .ano-pair .bar-e:hover .tip{display:block;}
.ano-pair .tip{
  display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:10.5px;padding:5px 8px;border-radius:6px;white-space:nowrap;margin-bottom:6px;
  font-family:'IBM Plex Mono',monospace; z-index:5;
}
.ano-label{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;color:var(--primary-dark);margin-top:8px;}
.ano-legend{display:flex;gap:18px;justify-content:center;margin-top:6px;font-size:11.5px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
.ano-legend span{display:flex;align-items:center;gap:6px;}
.ano-legend .sw{width:10px;height:10px;border-radius:3px;}
.ano-legend .sw.c{background:var(--primary);}
.ano-legend .sw.e{background:var(--accent);}
.ano-table{width:100%;border-collapse:collapse;margin-top:22px;}
.ano-table th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid var(--ink);
}
.ano-table td{padding:9px 10px;font-size:13px;border-bottom:1px solid var(--line-soft);}
.ano-table td.num{font-family:'IBM Plex Mono',monospace;text-align:right;}
.ano-table td.saldo{color:var(--accent);font-weight:700;}
.ano-table tr:last-child td{border-bottom:none;}

/* ---------- Cliente header ---------- */
.client-plate{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  background:var(--primary-dark); color:#eef6f5; border-radius:16px; padding:24px 28px; margin-bottom:24px;
  box-shadow:var(--shadow);
}
.client-plate .cp-id{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#a8d6d2;letter-spacing:.1em;text-transform:uppercase;}
.client-plate .cp-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;color:#fff;margin-top:4px;text-transform:uppercase;}
.client-plate .cp-code{
  font-family:'IBM Plex Mono',monospace; background:#ffffff14; border:1px dashed #ffffff55;
  padding:8px 14px;border-radius:10px;font-size:13px;color:#eef6f5;
}

/* ---------- Export bar ---------- */
.export-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  background:var(--plate); border:1px solid var(--line-soft); border-radius:12px;
  padding:14px 18px; margin-bottom:22px; box-shadow:var(--shadow);
}
.export-label{
  display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
}
.export-label svg{width:16px;height:16px;flex-shrink:0;}
.export-buttons{display:flex; gap:10px; flex-wrap:wrap;}
.export-btn{
  display:flex; align-items:center; gap:7px; border:1.5px solid var(--line);
  background:var(--white); padding:9px 16px; border-radius:9px; cursor:pointer;
  font-family:'Inter'; font-weight:700; font-size:12.5px; color:var(--ink); transition:all .15s;
}
.export-btn svg{width:15px;height:15px;}
.export-btn.pdf:hover{border-color:#c0392b;color:#c0392b;background:#fdf1ef;}
.export-btn.xlsx:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-tint);}
.export-btn:disabled{opacity:.5;cursor:wait;}
@media (max-width:520px){
  .export-bar{flex-direction:column;align-items:stretch;}
  .export-buttons{width:100%;}
  .export-btn{flex:1;justify-content:center;}
}
/* ---------- Filters ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
.filters input[type=text]{
  flex:1; min-width:180px; padding:10px 14px; border-radius:9px; border:1px solid var(--line);
  font-size:13.5px; font-family:'Inter'; background:var(--white); outline:none;
}
.filters input[type=text]:focus{border-color:var(--primary);}
.chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-soft);letter-spacing:.02em;
  transition:all .15s; white-space:nowrap;
}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.chip:hover:not(.active){border-color:var(--primary);color:var(--primary);}

/* ---------- Pedido card ---------- */
.pedido-card{
  background:var(--plate); border:1px solid var(--line-soft); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow);
}
.pedido-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 20px; cursor:pointer; user-select:none;
}
.pedido-head:hover{background:var(--bg-deep);}
.ph-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.stamp{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px;
  border:1.5px dashed var(--primary); color:var(--primary-dark);
  padding:6px 10px; border-radius:8px; transform:rotate(-1deg); background:var(--primary-tint);
  white-space:nowrap;
}
.ph-meta{font-size:12px;color:var(--ink-soft);}
.ph-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.ph-figure{text-align:right;}
.ph-figure .f-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
.ph-figure .f-value{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;color:var(--primary-dark);text-transform:none;}
.ph-figure.saldo .f-value{color:var(--accent);}
.ph-figure.devol .f-value{color:var(--partial);}
.devol-note{
  background:var(--partial-tint); color:#7a5606; border:1px solid var(--partial);
  border-radius:8px; padding:8px 12px; font-size:12px; margin:8px 0; font-weight:500;
}
.chevron{width:20px;height:20px;flex-shrink:0;transition:transform .2s;color:var(--ink-soft);}
.pedido-card.open .chevron{transform:rotate(180deg);}
.nota-card.open .chevron{transform:rotate(180deg);}
.pedido-body{display:none; border-top:1px solid var(--line-soft); padding:6px 14px 16px;}
.pedido-card.open .pedido-body{display:block;}
.nota-card.open .pedido-body{display:block;}

/* ---------- Item row ---------- */
.item-row{border-bottom:1px solid var(--line-soft);}
.item-row:last-child{border-bottom:none;}
.item-head{
  display:grid; grid-template-columns: 1.9fr .8fr 1fr 1fr 24px; gap:10px; align-items:center;
  padding:12px 8px; cursor:pointer;
}
.item-head:hover{background:var(--bg-deep);}
.item-desc{font-size:13.5px; font-weight:600; color:var(--ink);}
.item-code{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);margin-top:2px;}
.status-badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;
}
.status-badge.concluido{background:var(--ok-tint);color:var(--ok);}
.status-badge.parcial{background:var(--partial-tint);color:var(--partial);}
.status-badge.pendente{background:var(--pending-tint);color:var(--pending);}
.status-badge.cancelado{background:#f3dede;color:#9a3b3b;}
.status-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* pipe gauge (signature element) */
.gauge-wrap{display:flex;flex-direction:column;gap:4px;}
.gauge{
  height:14px; border-radius:999px; background:var(--pending-tint);
  border:1px solid var(--line); overflow:hidden; position:relative;
}
.gauge .fill{height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-dark)); border-radius:999px 0 0 999px;}
.gauge-nums{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-soft);display:flex;justify-content:space-between;}

.item-figure{text-align:right;}
.item-figure .f-value{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--primary-dark);}
.item-figure .f-label{font-size:9.5px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;}
.item-figure.saldo .f-value{color:var(--accent);}
.item-chevron{width:16px;height:16px;color:var(--ink-soft);transition:transform .2s;}
.item-row.open .item-chevron{transform:rotate(180deg);}

.item-body{display:none;padding:0 8px 16px 8px;}
.item-row.open .item-body{display:block;}
.deliveries{border-collapse:collapse;width:100%;margin-top:6px;}
.deliveries thead th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);padding:6px 10px;border-bottom:1px solid var(--line);
}
.deliveries tbody td{padding:8px 10px;font-size:13px;border-bottom:1px solid var(--line-soft);}
.deliveries tbody tr:last-child td{border-bottom:none;}
.deliveries .nf-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--accent-tint);color:#8a3510;padding:2px 8px;border-radius:6px;}
.no-deliveries{font-size:13px;color:var(--ink-soft);padding:10px;font-style:italic;}

/* ---------- Tabs (cliente view) ---------- */
.view-tabs{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.view-tab{
  background:var(--white);border:1px solid var(--line);color:var(--ink-soft);
  padding:10px 18px;border-radius:10px 10px 0 0;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Inter'; letter-spacing:.01em; border-bottom:none; position:relative; top:1px;
}
.view-tab.active{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);}
.view-tab:hover:not(.active){color:var(--primary);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Nota de entrega card ---------- */
.nota-card{
  background:var(--plate); border:1px solid var(--line-soft); border-radius:var(--radius);
  margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow);
}
.nota-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 20px; cursor:pointer; user-select:none;
}
.nota-head:hover{background:var(--bg-deep);}
.nh-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.date-plate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--primary-tint); border:1px solid var(--primary); border-radius:9px;
  padding:6px 12px;min-width:64px;
}
.date-plate .dp-day{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;color:var(--primary-dark);line-height:1;}
.date-plate .dp-rest{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.nh-meta{font-size:12px;color:var(--ink-soft);}
.nh-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.produtos-table{border-collapse:collapse;width:100%;margin-top:6px;}
.produtos-table thead th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);padding:6px 10px;border-bottom:1px solid var(--line);
}
.produtos-table tbody td{padding:8px 10px;font-size:13px;border-bottom:1px solid var(--line-soft);}
.produtos-table tbody tr:last-child td{border-bottom:none;}
.produtos-table td.num{font-family:'IBM Plex Mono',monospace;text-align:right;}

/* ---------- Empty / footer ---------- */
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);}
.empty-state .es-icon{font-size:34px;margin-bottom:10px;}
footer{
  border-top:1px solid var(--line); padding:22px 24px; text-align:center;
  font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; letter-spacing:.03em;
}

@media (max-width:860px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:28px;}
  .item-head{grid-template-columns:1.6fr 1fr 22px; row-gap:8px;}
  .item-head .item-figure:nth-child(3){display:none;}
}
@media (max-width:520px){
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .search-box{flex-direction:column; align-items:stretch;}
  .search-box button{width:100%;}
  .ph-right{width:100%; justify-content:space-between;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}

/* ---------- App bottom nav (mobile) ---------- */
.app-bottom-nav{
  display:none;
}
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .app-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--primary-dark); border-top:1px solid #ffffff22;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px -6px rgba(0,0,0,.35);
  }
  .abn-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:transparent; border:none; color:#a9bdc0; cursor:pointer; padding:6px 4px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
    border-radius:10px; transition:color .15s, background .15s;
  }
  .abn-btn svg{width:21px;height:21px;}
  .abn-btn.active{color:#fff; background:#ffffff12;}
  .abn-btn.active svg{color:var(--accent);}
  .abn-fab{
    width:46px;height:46px;border-radius:50%;background:var(--accent);
    display:flex;align-items:center;justify-content:center;color:#fff;
    margin-top:-26px; box-shadow:0 6px 16px -4px rgba(232,97,30,.6); border:3px solid var(--bg);
  }
  .abn-fab svg{width:20px;height:20px;}
}