/* =====================================================================
   ui.css · loaded last on every page, so it wins over page-inline styles.
   1) One sidebar/topbar geometry for every dashboard page (Dashboard used
      a 240px sidebar while the other pages used 248px, which made the
      whole layout jump when switching pages).
   2) Buttons: squarer corners (rounded rect instead of pill).
   3) Notification dropdown.
   ===================================================================== */

/* ---- 1. Same shell geometry everywhere ---- */
html:root body:has(aside.side) { --side-w: 248px !important; }
html:root body:has(aside.side) .wrap {
  padding: 0 0 0 248px !important;
  display: block !important;
}
html:root body aside.side {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
  padding: 14px 12px !important;
  background: #0b0c12 !important;
}
html:root body aside.side .side-sep {
  border: 0 !important;
  height: 1px !important;
  margin: 12px 8px !important;
  background-image: radial-gradient(#3a3f52 1px, transparent 1.2px) !important;
  background-size: 5px 1px !important;
  background-repeat: repeat-x !important;
  background-color: transparent !important;
}
html:root body aside.side .side-lab {
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 14px 10px 6px !important;
  color: #6a7084 !important;
  font-weight: 500 !important;
}
html:root body aside.side a:not(.brand) {
  min-height: 36px !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 12px !important;
  margin: 0 0 2px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  gap: 10px !important;
}
html:root body aside.side a .si { width: 16px !important; height: 16px !important; margin: 0 !important; }
html:root body:has(aside.side) .topbar {
  padding: .75rem 1.4rem !important;
  min-height: 64px;
  box-sizing: border-box;
}
html:root body:has(aside.side) .main { padding: 1.35rem 1.6rem 2.5rem !important; }
html:root body.side-min:has(aside.side) .wrap { padding-left: 76px !important; }
html:root body.side-min aside.side { width: 76px !important; min-width: 76px !important; max-width: 76px !important; }
html:root body.side-min aside.side a:not(.brand) { padding-left: 0 !important; padding-right: 0 !important; font-size: 0 !important; justify-content: center !important; }
@media (max-width: 900px) {
  html:root body:has(aside.side) .wrap,
  html:root body.side-min:has(aside.side) .wrap { padding-left: 0 !important; }
}

/* ---- 2. Squarer buttons ---- */
html:root .btn-main, html:root .btn-deal, html:root a.btn-deal, html:root .topbar-cta,
html:root .go, html:root button.go, html:root .btn-ghost, html:root .btn-join,
html:root .back, html:root .rowbtns .back, html:root .box .btn,
html:root .act, html:root .sendgo, html:root .dsbtn, html:root .sentok,
html:root .depbtn, html:root .menu a.login {
  border-radius: 10px !important;
}
/* Deal page action buttons: pill shaped */
html:root .act, html:root .sendgo, html:root .dsbtn { border-radius: 999px !important; }
html:root .bellbtn, html:root .burger, html:root .side-collapse { border-radius: 11px !important; }
html:root .v-seg, html:root .filter-tabs, html:root .voltabs { border-radius: 11px !important; }
html:root .v-seg button, html:root .filter-tabs button, html:root .voltabs button { border-radius: 8px !important; }

/* ---- 3. Notification dropdown ---- */
html:root .bellwrap { position: relative; }
html:root .bellbtn { position: relative; }
html:root .belln {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #e8b429 !important;
  color: #111 !important;
  font-size: .66rem;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  pointer-events: none;
}
html:root .bellpanel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  width: min(360px, 88vw);
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #12151c !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  z-index: 300 !important;
}
html:root .bellpanel.on { display: flex !important; flex-direction: column; }
.bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bell-head b { font-size: .9rem; font-weight: 600; color: #f0f2f6; }
.bell-all {
  border: 0;
  background: transparent;
  color: #e8b429;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  padding: .25rem .4rem;
  border-radius: 6px;
}
.bell-all:hover { background: rgba(232,180,41,.1); }
.bell-all:disabled { color: #5d6373; cursor: default; background: transparent; }
html:root #bellList {
  max-height: 340px;
  overflow-y: auto;
  padding: .35rem;
  overscroll-behavior: contain;
}
.bell-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .6rem .6rem;
  border-radius: 10px;
  cursor: pointer;
  color: #e8eaef;
}
.bell-row:hover { background: rgba(255,255,255,.05); }
.bell-row .bdot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: .38rem;
  border-radius: 50%;
  background: #e8b429;
}
.bell-row.seen { color: #8b93a3; }
.bell-row.seen .bdot { background: transparent; }
.bell-row .btxt { flex: 1; min-width: 0; font-size: .84rem; line-height: 1.35; }
.bell-row .btxt small { display: block; color: #6f7686; font-size: .72rem; margin-top: .15rem; }
.bell-row .bmark {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: #aab1bf;
  font: inherit;
  font-size: .7rem;
  padding: .2rem .45rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.bell-row .bmark:hover { color: #fff; border-color: rgba(255,255,255,.3); }
html:root .bell-empty { color: #8b93a3; padding: 1.4rem .9rem; font-size: .85rem; text-align: center; }

/* ---- Settings: currency picker ---- */
.cur-opts { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.cur-opt { position: relative; cursor: pointer; }
.cur-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cur-opt span {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 150px;
  padding: .7rem .9rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: #0b0c12;
  color: #c9cdd6;
  font-weight: 600;
  font-size: .9rem;
}
.cur-opt span i {
  font-style: normal;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a1d26;
  color: #e8b429;
}
.cur-opt input:checked + span { border-color: #e8b429; color: #fff; background: rgba(232,180,41,.07); }
.cur-opt:hover span { border-color: rgba(255,255,255,.22); }