/* the top bar, baked into every page (27 oct, tools/bake_nav_27oct.js): the CSS the scripts inject, here from the start */

  /* 27 oct (cocos: "modifica fontul si iconitele fa-le un contur, abia se vad"): a clear pill, outlined dot and bolt */
  .twbtn { display: inline-flex !important; align-items: center; gap: 7px; margin-right: 10px; padding: 6px 14px !important; border: 1px solid var(--line2, #c9bca5); border-radius: 8px; background: var(--card, #efe6d3); color: var(--ink, #2a2520) !important; font: 600 14px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.1px; text-decoration: none !important; }
  .twbtn:hover { border-color: var(--ink, #2a2520); }
  @media (max-width: 700px) { .twbtn { font-size: 13px !important; padding: 5px 11px !important; } }   /* same size as the wallet address next to it */
  .twbtn .twon { width: 8px; height: 8px; border-radius: 50%; background: var(--faint, #9a8f7a); box-shadow: 0 0 0 1.5px var(--ink, #2a2520); } .twbtn.inst .twon { background: #f0b429; box-shadow: 0 0 0 1.5px var(--ink, #2a2520), 0 0 0 4px rgba(240,180,41,.3); }
  .twbtn .twz { font-size: 13px; line-height: 1; filter: drop-shadow(0 0 .6px var(--ink, #2a2520)) drop-shadow(0 0 .6px var(--ink, #2a2520)) drop-shadow(0 0 .4px var(--ink, #2a2520)); }
  #twPanel { position: fixed; top: 58px; right: 16px; width: min(360px, calc(100vw - 32px)); z-index: 900; background: var(--card, #efe6d3); color: var(--ink, #2a2520); border: 1px solid var(--line2, #c9bca5); border-radius: 12px; box-shadow: 0 14px 40px rgba(42,33,24,.22); padding: 14px; font: 13px/1.4 Inter, system-ui, sans-serif; display: grid; gap: 10px; }
  #twPanel[hidden] { display: none; }
  #twPanel .h { display: flex; align-items: center; gap: 8px; } #twPanel .h b { font-size: 14px; } #twPanel .mono { font: 500 12px "JetBrains Mono", monospace; color: var(--ink2, #4f473d); }
  #twPanel .sp { flex: 1; } #twPanel .big { font: 700 24px Inter; letter-spacing: -.3px; } #twPanel .muted { color: var(--muted, #7a7060); font-size: 12px; }
  #twPanel button.s { border: 1px solid var(--line2, #c9bca5); background: var(--field, #eae1d2); color: var(--ink2, #4f473d); border-radius: 6px; padding: 5px 10px; font: 600 12px Inter; cursor: pointer; } #twPanel button.s:hover { border-color: var(--ink, #2a2520); color: var(--ink, #2a2520); }
  #twPanel button.p { border: 0; background: var(--ink, #2a2520); color: var(--card, #efe6d3); border-radius: 8px; padding: 9px 12px; font: 700 13px Inter; cursor: pointer; width: 100%; }
  #twPanel .tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line, #ddd); padding-bottom: 6px; } #twPanel .tabs span { font: 600 11px Inter; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #7a7060); cursor: pointer; } #twPanel .tabs span.on { color: var(--ink, #2a2520); text-decoration: underline; text-underline-offset: 4px; }
  #twPanel .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #twPanel input.i { flex: 1; min-width: 0; border: 1px solid var(--line2, #c9bca5); background: var(--field, #eae1d2); color: var(--ink, #2a2520); border-radius: 7px; padding: 8px 10px; font: 13px Inter; }
  #twPanel .sw { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, #ddd); border-radius: 9px; cursor: pointer; } #twPanel .sw input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 13px; height: 13px; margin: 0 2px; border-radius: 50%; background: var(--faint, #9a8f7a); box-shadow: 0 0 0 1.5px var(--ink, #2a2520); cursor: pointer; } #twPanel .sw input:checked { background: #f0b429; box-shadow: 0 0 0 1.5px var(--ink, #2a2520), 0 0 0 5px rgba(240,180,41,.3); } #twPanel .sw b { font-size: 13px; }
  #twPanel .hold { display: grid; gap: 6px; max-height: 210px; overflow: auto; } #twPanel .hold .r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } #twPanel .hold img { width: 22px; height: 22px; border-radius: 5px; }
  #twPanel .st { font-size: 12px; color: var(--ink2, #4f473d); min-height: 16px; }
  .qb { position: absolute; top: 8px; right: 8px; z-index: 3; border: 1px solid var(--line2, #c9bca5); background: var(--card, #efe6d3); color: var(--ink, #2a2520); border-radius: 999px; padding: 2px 9px; font: 700 11px Inter; cursor: pointer; line-height: 18px; white-space: nowrap; }
  .qb:hover { border-color: #f0b429; background: #fbe7b0; } .qb.busy { opacity: .6; cursor: wait; } .qb.ok { background: #d9ecc9; border-color: #5f8f37; } .qb.err { background: #f6d5cc; border-color: #c0462c; }
  .ccard .qb { top: auto; bottom: 10px; } tr .qb, .prow .qb { position: static; margin-left: 8px; vertical-align: middle; }
  #qbToast { position: fixed; left: 16px; bottom: 16px; z-index: 950; background: var(--ink, #2a2520); color: var(--card, #efe6d3); padding: 9px 14px; border-radius: 9px; font: 600 12.5px Inter, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 360px; }
  #qbToast a { color: inherit; } #qbToast[hidden] { display: none; }
nav .brand.chat{display:inline-flex;align-items:center;gap:7px}nav .brand svg.logo.pad{width:42px!important;height:42px!important}@media (max-width:700px){nav .brand.chat .t{display:none}nav .brand.chat svg{width:26px!important;height:26px!important}nav .brand svg.logo.pad{width:32px!important;height:32px!important}}
nav a.pillnav:not(.brand):not(.connect) { display: inline-flex !important; align-items: center; gap: 7px; font: 600 14px Inter, system-ui, sans-serif !important; padding: 6px 12px !important; border-radius: 999px; color: var(--ink2, #5a5046) !important; text-decoration: none; border: 1px solid transparent !important; margin: 0 !important; } nav a.pillnav svg { width: 17px; height: 17px; flex: 0 0 17px; } nav a.pillnav:hover { color: var(--ink, #2b2620) !important; background: var(--sunken, rgba(0,0,0,.05)); } nav a.pillnav.on { color: var(--ink, #2b2620) !important; background: var(--card, #fff); border-color: var(--line2, #d8ccb6) !important; } nav .pillgrp { display: flex; gap: 4px; align-items: center; } @media (max-width: 700px) { nav a.pillnav:not(.brand):not(.connect) { font-size: 13px !important; padding: 6px 11px !important; margin: 2px 0 6px !important; } nav a.pillnav svg { width: 15px; height: 15px; flex-basis: 15px; } nav .pillgrp { order: 3; width: 100%; overflow-x: auto; } }
nav a.connect.wbtn { display: inline-flex !important; align-items: center; gap: 7px; font: 600 14px Inter, system-ui, sans-serif !important; padding: 6px 14px !important; border-radius: 8px; border: 1px solid var(--line2, rgba(0,0,0,.2)) !important; background: var(--card, #ddd1be); color: var(--ink, #2a2118) !important; text-decoration: none; cursor: pointer; } nav a.connect.wbtn:hover { border-color: var(--ink, #2a2118) !important; } nav a.connect.wbtn .wdot { width: 8px; height: 8px; border-radius: 50%; background: #5f8f37; display: inline-block; } #walletMenu { position: fixed; z-index: 1002; min-width: 190px; background: var(--card, #ddd1be); border: 1px solid var(--line2, rgba(0,0,0,.2)); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; font: 600 13px Inter, system-ui, sans-serif; } #walletMenu div { padding: 10px 14px; cursor: pointer; color: var(--ink, #2a2118); } #walletMenu div:hover { background: var(--sunken, rgba(0,0,0,.05)); } #walletMenu .wout { color: #b3261e; border-top: 1px solid var(--line, rgba(0,0,0,.1)); } #walletMenu .wsub { font: 500 11px Inter, system-ui, sans-serif; color: var(--muted, #7a6a58); cursor: default; padding-top: 0; } #walletMenu .wsub:hover { background: none; } @media (max-width: 700px) { nav a.connect.wbtn { font-size: 13px !important; padding: 5px 11px !important; } }

  /* 27 oct (cocos: "modifica fontul si iconitele fa-le un contur, abia se vad"): a clear pill, outlined dot and bolt */
  .twbtn { display: inline-flex !important; align-items: center; gap: 7px; margin-right: 10px; padding: 6px 14px !important; border: 1px solid var(--line2, #c9bca5); border-radius: 8px; background: var(--card, #efe6d3); color: var(--ink, #2a2520) !important; font: 600 14px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.1px; text-decoration: none !important; }
  .twbtn:hover { border-color: var(--ink, #2a2520); }
  @media (max-width: 700px) { .twbtn { font-size: 13px !important; padding: 5px 11px !important; } }   /* same size as the wallet address next to it */
  .twbtn .twon { width: 8px; height: 8px; border-radius: 50%; background: var(--faint, #9a8f7a); box-shadow: 0 0 0 1.5px var(--ink, #2a2520); } .twbtn.inst .twon { background: #f0b429; box-shadow: 0 0 0 1.5px var(--ink, #2a2520), 0 0 0 4px rgba(240,180,41,.3); }
  .twbtn .twz { font-size: 13px; line-height: 1; filter: drop-shadow(0 0 .6px var(--ink, #2a2520)) drop-shadow(0 0 .6px var(--ink, #2a2520)) drop-shadow(0 0 .4px var(--ink, #2a2520)); }
  #twPanel { position: fixed; top: 58px; right: 16px; width: min(360px, calc(100vw - 32px)); z-index: 900; background: var(--card, #efe6d3); color: var(--ink, #2a2520); border: 1px solid var(--line2, #c9bca5); border-radius: 12px; box-shadow: 0 14px 40px rgba(42,33,24,.22); padding: 14px; font: 13px/1.4 Inter, system-ui, sans-serif; display: grid; gap: 10px; }
  #twPanel[hidden] { display: none; }
  #twPanel .h { display: flex; align-items: center; gap: 8px; } #twPanel .h b { font-size: 14px; } #twPanel .mono { font: 500 12px "JetBrains Mono", monospace; color: var(--ink2, #4f473d); }
  #twPanel .sp { flex: 1; } #twPanel .big { font: 700 24px Inter; letter-spacing: -.3px; } #twPanel .muted { color: var(--muted, #7a7060); font-size: 12px; }
  #twPanel button.s { border: 1px solid var(--line2, #c9bca5); background: var(--field, #eae1d2); color: var(--ink2, #4f473d); border-radius: 6px; padding: 5px 10px; font: 600 12px Inter; cursor: pointer; } #twPanel button.s:hover { border-color: var(--ink, #2a2520); color: var(--ink, #2a2520); }
  #twPanel button.p { border: 0; background: var(--ink, #2a2520); color: var(--card, #efe6d3); border-radius: 8px; padding: 9px 12px; font: 700 13px Inter; cursor: pointer; width: 100%; }
  #twPanel .tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line, #ddd); padding-bottom: 6px; } #twPanel .tabs span { font: 600 11px Inter; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #7a7060); cursor: pointer; } #twPanel .tabs span.on { color: var(--ink, #2a2520); text-decoration: underline; text-underline-offset: 4px; }
  #twPanel .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #twPanel input.i { flex: 1; min-width: 0; border: 1px solid var(--line2, #c9bca5); background: var(--field, #eae1d2); color: var(--ink, #2a2520); border-radius: 7px; padding: 8px 10px; font: 13px Inter; }
  #twPanel .sw { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, #ddd); border-radius: 9px; cursor: pointer; } #twPanel .sw input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 13px; height: 13px; margin: 0 2px; border-radius: 50%; background: var(--faint, #9a8f7a); box-shadow: 0 0 0 1.5px var(--ink, #2a2520); cursor: pointer; } #twPanel .sw input:checked { background: #f0b429; box-shadow: 0 0 0 1.5px var(--ink, #2a2520), 0 0 0 5px rgba(240,180,41,.3); } #twPanel .sw b { font-size: 13px; }
  #twPanel .hold { display: grid; gap: 6px; max-height: 210px; overflow: auto; } #twPanel .hold .r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } #twPanel .hold img { width: 22px; height: 22px; border-radius: 5px; }
  #twPanel .st { font-size: 12px; color: var(--ink2, #4f473d); min-height: 16px; }
  .qb { position: absolute; top: 8px; right: 8px; z-index: 3; border: 1px solid var(--line2, #c9bca5); background: var(--card, #efe6d3); color: var(--ink, #2a2520); border-radius: 999px; padding: 2px 9px; font: 700 11px Inter; cursor: pointer; line-height: 18px; white-space: nowrap; }
  .qb:hover { border-color: #f0b429; background: #fbe7b0; } .qb.busy { opacity: .6; cursor: wait; } .qb.ok { background: #d9ecc9; border-color: #5f8f37; } .qb.err { background: #f6d5cc; border-color: #c0462c; }
  .ccard .qb { top: auto; bottom: 10px; } tr .qb, .prow .qb { position: static; margin-left: 8px; vertical-align: middle; }
  #qbToast { position: fixed; left: 16px; bottom: 16px; z-index: 950; background: var(--ink, #2a2520); color: var(--card, #efe6d3); padding: 9px 14px; border-radius: 9px; font: 600 12.5px Inter, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 360px; }
  #qbToast a { color: inherit; } #qbToast[hidden] { display: none; }
nav .brand.chat{display:inline-flex;align-items:center;gap:7px}nav .brand img.logo.pad{width:35px!important;height:35px!important}@media (max-width:700px){nav .brand.chat .t{display:none}nav .brand.chat img{width:26px!important;height:26px!important}nav .brand img.logo.pad{width:27px!important;height:27px!important}}
nav a.pillnav:not(.brand):not(.connect) { display: inline-flex !important; align-items: center; gap: 7px; font: 600 14px Inter, system-ui, sans-serif !important; padding: 6px 12px !important; border-radius: 999px; color: var(--ink2, #5a5046) !important; text-decoration: none; border: 1px solid transparent !important; margin: 0 !important; } nav a.pillnav svg { width: 17px; height: 17px; flex: 0 0 17px; } nav a.pillnav:hover { color: var(--ink, #2b2620) !important; background: var(--sunken, rgba(0,0,0,.05)); } nav a.pillnav.on { color: var(--ink, #2b2620) !important; background: var(--card, #fff); border-color: var(--line2, #d8ccb6) !important; } nav .pillgrp { display: flex; gap: 4px; align-items: center; } @media (max-width: 700px) { nav a.pillnav:not(.brand):not(.connect) { font-size: 13px !important; padding: 6px 11px !important; margin: 2px 0 6px !important; } nav a.pillnav svg { width: 15px; height: 15px; flex-basis: 15px; } nav .pillgrp { order: 3; width: 100%; overflow-x: auto; } }
nav a.connect.wbtn { display: inline-flex !important; align-items: center; gap: 7px; font: 600 14px Inter, system-ui, sans-serif !important; padding: 6px 14px !important; border-radius: 8px; border: 1px solid var(--line2, rgba(0,0,0,.2)) !important; background: var(--card, #ddd1be); color: var(--ink, #2a2118) !important; text-decoration: none; cursor: pointer; } nav a.connect.wbtn:hover { border-color: var(--ink, #2a2118) !important; } nav a.connect.wbtn .wdot { width: 8px; height: 8px; border-radius: 50%; background: #5f8f37; display: inline-block; } #walletMenu { position: fixed; z-index: 1002; min-width: 190px; background: var(--card, #ddd1be); border: 1px solid var(--line2, rgba(0,0,0,.2)); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; font: 600 13px Inter, system-ui, sans-serif; } #walletMenu div { padding: 10px 14px; cursor: pointer; color: var(--ink, #2a2118); } #walletMenu div:hover { background: var(--sunken, rgba(0,0,0,.05)); } #walletMenu .wout { color: #b3261e; border-top: 1px solid var(--line, rgba(0,0,0,.1)); } #walletMenu .wsub { font: 500 11px Inter, system-ui, sans-serif; color: var(--muted, #7a6a58); cursor: default; padding-top: 0; } #walletMenu .wsub:hover { background: none; } @media (max-width: 700px) { nav a.connect.wbtn { font-size: 13px !important; padding: 5px 11px !important; } }
nav .brand img.navlogo { display: block; flex: 0 0 auto; }
/* the scrollbar keeps its place from the start: when a list loads and the page grows, the bar no longer slides left (27 oct) */
html { scrollbar-gutter: stable; }
/* 701-1180 px (27 oct; "html body" because the scripts inject the same rules again after this file): the bar did not fit
   since the trading wallet button joined it (Connect went off the screen). Tighter gaps up to 1180 px (the chat's tabs are the
   widest), the page pills keep only their icon up to 1100 px, smaller brand names on a narrow tablet */
@media (min-width: 701px) and (max-width: 1180px) {
  html body nav { gap: 12px !important; padding-left: 14px !important; padding-right: 14px !important; }
  html body nav .brands { gap: 10px !important; }
  html body nav .twbtn { margin-right: 4px !important; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  html body nav a.pillnav:not(.brand):not(.connect) { font-size: 0 !important; padding: 7px 9px !important; gap: 0 !important; }
  html body nav a.pillnav:not(.brand):not(.connect) svg { width: 16px !important; height: 16px !important; }
}
@media (min-width: 701px) and (max-width: 820px) {
  html body nav { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  html body nav .brands { gap: 6px !important; }
}
@media (min-width: 701px) and (max-width: 760px) { html body nav .brand { font-size: 16px !important; } html body nav .brands { gap: 4px !important; } html body nav a.connect { padding-left: 9px !important; padding-right: 9px !important; } }
/* (27 oct, cocos) the whole-pizza pizzapad logo drawn as big as the pizzachat one: 28 px of pizza in both */