/* Locked application shell: keep primary navigation fixed and position-stable across every view. */
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
}
body{
  padding-top:68px;
}
.topbar{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  height:68px!important;
  z-index:100!important;
}
.topbar nav{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  white-space:nowrap;
}
.topbar .nav-link{
  flex:0 0 auto;
  text-align:center;
}
/* Profile now lives in the fixed primary header; remove the duplicate Elve-style secondary switch. */
.tradehub-persistent-switch{
  display:none!important;
}
.tradehub-shell{
  padding-top:0!important;
}

/* Elve-style centered application canvas: keep content calm and visually balanced. */
main{
  width:min(1120px,calc(100% - 40px))!important;
  max-width:1120px!important;
  margin:0 auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
.mth-legal-footer{
  width:min(1120px,calc(100% - 40px))!important;
}

/* Day / night theme. The toggle already changes data-theme; these variables make the whole app respond. */
:root[data-theme="night"]{
  color-scheme:dark;
  --bg:#0d100f;
  --surface:#141816;
  --surface-2:#1a1f1c;
  --ink:#eef3f0;
  --muted:#9aa59f;
  --line:#2a322e;
  --green:#4fc087;
  --green2:#65cf99;
  --mint:#173326;
  --amber:#3a3118;
  --shadow:0 20px 55px rgba(0,0,0,.32);
}
:root[data-theme="night"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="night"] .topbar{background:rgba(13,16,15,.94)!important;border-color:var(--line)!important}
:root[data-theme="night"] .icon-button,
:root[data-theme="night"] .avatar,
:root[data-theme="night"] .quiet,
:root[data-theme="night"] .search-wrap,
:root[data-theme="night"] .offer-panel,
:root[data-theme="night"] .profile-head,
:root[data-theme="night"] .pending-card,
:root[data-theme="night"] .drawer,
:root[data-theme="night"] .modal,
:root[data-theme="night"] .pick-item,
:root[data-theme="night"] .trade-picker,
:root[data-theme="night"] .asset-card{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
:root[data-theme="night"] input,
:root[data-theme="night"] select,
:root[data-theme="night"] textarea{color:var(--ink)!important;background:transparent}
:root[data-theme="night"] .condition,
:root[data-theme="night"] .profile-tabs span{background:var(--surface-2)!important;color:var(--ink)!important}
:root[data-theme="night"] .avatar{background:#2a312d!important;color:var(--ink)!important}

/*
  Global interaction-state normalization.
  MyTradeHub uses Elve-like neutral selection states. Green is reserved for
  actual primary transaction actions and semantic success/completion states.
  This file is loaded last so older overlays cannot reintroduce conflicting
  active/highlight treatments.
*/
.topbar .nav-link,
.topbar .nav-link:hover,
.topbar .nav-link:focus,
.topbar .nav-link:active{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--muted)!important;
}
.topbar .nav-link.active{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--ink)!important;
  font-weight:800!important;
}

/* Secondary selectors: soft neutral fill, never a competing green CTA. */
.auction-tabs button.active,
.tradehub-filter-grid button.active,
.picker-side-toggle button.active{
  background:var(--surface-2)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
  box-shadow:inset 0 0 0 1px var(--line)!important;
}
.profile-tabs button.active{
  background:transparent!important;
  color:var(--ink)!important;
  border-color:var(--ink)!important;
  box-shadow:none!important;
}
.tradehub-action.active{
  color:var(--ink)!important;
  background:transparent!important;
}
.chip.active{
  background:var(--ink)!important;
  border-color:var(--ink)!important;
  color:var(--surface)!important;
}
.active-icon{
  background:var(--surface-2)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
  box-shadow:none!important;
}

/* Filled/selected trade content should read as content, not another CTA. */
.offer-panel.accent{
  border-color:var(--line)!important;
  box-shadow:none!important;
}
.slot.filled{
  background:var(--surface-2)!important;
  border-color:var(--line)!important;
}
.quick-side:hover,
.trade-pick-card:hover,
.pick-item:hover{
  border-color:color-mix(in srgb,var(--ink) 28%,var(--line))!important;
  background:var(--surface-2)!important;
}

/* One accessible focus treatment across all controls; no browser-white or green halos. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid color-mix(in srgb,var(--ink) 38%,transparent)!important;
  outline-offset:2px!important;
}
.modal-input:focus,
.auth-field input:focus{
  border-color:color-mix(in srgb,var(--ink) 28%,var(--line))!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent)!important;
}

/* Disabled controls stay visibly disabled without becoming bright white. */
button:disabled,
.primary:disabled,
.quiet:disabled{
  background:var(--surface-2)!important;
  border-color:var(--line)!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  opacity:.68!important;
  cursor:not-allowed!important;
}

/* Keep semantic states meaningful. These are status colors, not navigation highlights. */
.status.completed,
.step.done:before,
.step.current:before,
.step.done:after{
  /* intentionally retain the existing success green */
}

.mth-legal-footer{
  margin:20px auto 0;
  padding:24px 0 32px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:.82rem;
}
.mth-legal-footer nav{display:flex;align-items:center;gap:16px}
.mth-legal-footer a{color:var(--muted);text-decoration:none}
.mth-legal-footer a:hover{text-decoration:underline;color:var(--ink)}

/* Notification panel: compact, anchored to the fixed header. */
.notification-button{font-size:1rem;position:relative}
.notification-panel{
  position:fixed;
  top:76px;
  right:3.5vw;
  width:min(360px,calc(100vw - 28px));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(16,43,32,.15);
  padding:18px;
  z-index:120;
}
.notification-panel[hidden]{display:none!important}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.notification-panel-head h3{margin:0;font-size:1rem}
.notification-empty{padding:18px 4px 8px;color:var(--muted);font-size:.9rem;line-height:1.45}
.notification-empty strong{display:block;color:var(--ink);margin-bottom:4px}

@media(max-width:720px){
  body{padding-top:68px}
  .topbar{height:68px!important;padding-left:14px!important;padding-right:14px!important}
  .topbar .nav-link{padding:8px 7px!important;font-size:.8rem!important}
  .topbar nav{gap:1px!important}
  main{width:min(100% - 28px,1120px)!important}
  .mth-legal-footer{width:min(100% - 28px,1120px)!important;align-items:flex-start;flex-direction:column;padding-bottom:24px}
  .notification-panel{right:14px}
}
@media(max-width:520px){
  .topbar .brand span{display:none!important}
  .topbar .nav-link{padding:7px 5px!important;font-size:.74rem!important}
}