@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --paper: #f6f9ff;
  --surface: #ffffff;
  --ink: #0b1635;
  --muted: #5c6d8e;
  --line: #dce5f2;
  --line-dark: #b7c5d9;
  --orange: #ff7a16;
  --orange-soft: #fff0e2;
  --success: #256646;
  --danger: #a93d31;
  --font-sans: 'Nunito Sans', Roboto, Arial, Helvetica, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
}
html {
  background: var(--paper);
}
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.5;
}

body > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 3.65rem;
  padding: 0 max(1.1rem, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-right: 1.4rem;
  white-space: nowrap;
}
body > header h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.13rem;
  font-weight: 800;
  letter-spacing: -0.055em;
}
body > header h1 a {
  color: var(--ink);
  text-decoration: none;
}
body > header h1 a::before {
  display: none;
}
body > header h1 a::after {
  color: #1673ef;
  content: '.space';
}
body > header > .brand > p {
  display: none;
}
body > header nav {
  display: flex;
  min-width: 0;
  align-items: stretch;
}
.nav-primary,
.nav-account {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.nav-account {
  margin-left: auto;
}
body > header nav a,
body > header nav form button {
  display: inline-flex;
  align-items: center;
  min-height: 3.65rem;
  padding: 0.55rem 0.78rem;
  border: 0;
  border-radius: 0;
  color: #40506d;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
body > header nav a:hover,
body > header nav form button:hover {
  color: #1469dc;
  background: #f4f8ff;
}
body > header nav form {
  margin: 0;
}
.nav-primary a:first-child {
  color: #1469dc;
  background: transparent;
  font-weight: 750;
}
.nav-create {
  align-self: center;
  min-height: 2.1rem !important;
  margin: 0.72rem 0 0.72rem 0.45rem;
  padding: 0.4rem 0.85rem !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: var(--orange) !important;
  box-shadow: 0 2px 5px rgb(255 122 22 / 25%);
}
.nav-create:hover {
  background: #e96200 !important;
}
.nav-toggle {
  display: none;
}
body > hr {
  display: none;
}
body > form:not(main form) {
  width: min(960px, calc(100% - 2rem));
  margin: 1rem auto 0;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
}
body > form:not(main form) p {
  margin: 0;
}

main {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.4rem 0 4.5rem;
}
.page-home main {
  padding-top: 0;
}
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h2 {
  margin: 0 0 1.25rem;
  font-size: var(--text-2xl);
}
h3 {
  margin: 2.5rem 0 0.75rem;
  font-size: var(--text-xl);
}
h4 {
  margin: 1.4rem 0 0.55rem;
  font-size: var(--text-md);
}
p {
  max-width: 76ch;
}
a {
  color: #1469dc;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
a:hover {
  color: #0b4fae;
}
small {
  color: var(--muted);
}
code,
pre,
textarea[spellcheck='false'],
.technical {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84em;
}
code {
  padding: 0.08rem 0.22rem;
  background: #f0efeb;
}
[data-live-unread]:not(:empty) {
  display: inline;
  color: var(--orange);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Readable measure for the plain (unclassed) sections of admin and legacy views; the
   designed pages lay out their own sections. */
form,
fieldset,
section[aria-labelledby]:not([class]),
details {
  max-width: 760px;
}
main > form,
main > details,
main > section[aria-labelledby] {
  margin: 1.2rem 0;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
form p {
  margin: 0.9rem 0;
}
fieldset {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
}
legend {
  padding: 0 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}
label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #34332f;
  font-size: 0.9rem;
  font-weight: 650;
}
label:has(input[type='checkbox']),
label:has(input[type='radio']) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
input,
textarea,
select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-weight: 400;
}
input[type='checkbox'],
input[type='radio'] {
  width: auto;
  min-height: auto;
  accent-color: var(--orange);
}
textarea {
  min-height: 7rem;
  resize: vertical;
}
input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgb(232 120 0 / 35%);
  outline-offset: 2px;
  border-color: var(--orange);
}

button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--orange);
  border-radius: 8px;
  color: #fff;
  background: var(--orange);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
button:hover,
.button:hover {
  color: #fff;
  border-color: #e96200;
  background: #e96200;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.button-secondary {
  border-color: #9cc0f5;
  color: #1469dc;
  background: #fff;
}
.button-secondary:hover {
  border-color: #1469dc;
  color: #0b4fae;
  background: #f4f8ff;
}
form[action*='approve'] button,
form[action*='start'] button,
form[action*='assign'] button,
form[action*='browser-sign'] button {
  border-color: var(--orange);
  color: #fff;
  background: var(--orange);
}
form[action*='cancel'] button,
form[action*='withdraw'] button,
form[action*='suspend'] button,
form[action*='return-funds'] button {
  border-color: #f0a39a;
  color: #c2362a;
  background: #fff;
}
form[action*='cancel'] button:hover,
form[action*='withdraw'] button:hover,
form[action*='suspend'] button:hover,
form[action*='return-funds'] button:hover {
  border-color: #c2362a;
  color: #fff;
  background: #c2362a;
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 960px;
  margin-bottom: 1.1rem;
}
.page-heading h2 {
  margin: 0;
}

.market-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(410px, 1.06fr);
  align-items: stretch;
  min-height: 312px;
  margin: 0 -1.5rem;
  overflow: hidden;
  border-bottom: 1px solid #dce8f7;
  background: linear-gradient(122deg, #fff 0%, #f8fbff 47%, #eef6ff 100%);
}
.market-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  padding: 2.35rem 0 2.35rem 1.5rem;
}
.kicker {
  margin: 0;
  color: #3879dc;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.market-hero h2 {
  max-width: 12ch;
  margin: 0.45rem 0 0.85rem;
  color: #081735;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 0.98;
}
.market-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.market-hero-copy > p:not(.kicker):not(.home-actions) {
  max-width: 47ch;
  margin: 0;
  color: #536887;
  font-size: 1rem;
  line-height: 1.45;
}
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
  margin: 1.35rem 0 0;
}
.home-actions .button {
  min-width: 9.1rem;
  border-color: var(--orange);
  border-radius: 7px;
  background: var(--orange);
  box-shadow: 0 4px 9px rgb(255 122 22 / 22%);
}
.home-actions .button span {
  margin-left: 0.3rem;
}
.home-actions .button-secondary {
  border-color: #9fc4f9;
  color: #1469dc;
  background: #fff;
  box-shadow: none;
}
.home-actions .button-secondary:hover {
  color: #0b4fae;
  background: #f4f8ff;
}
.market-art {
  position: relative;
  min-height: 312px;
  overflow: hidden;
}
.market-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mascot-slot {
  display: none;
}
.art-escrow-chip {
  position: absolute;
  right: 14%;
  bottom: 20%;
  display: grid;
  place-items: center;
  width: 4.7rem;
  height: 4.7rem;
  border: 6px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 8px 20px rgb(255 122 22 / 28%);
  transform: rotate(-5deg);
}
.art-escrow-chip b {
  font-size: 0.95rem;
  line-height: 1;
}
.art-escrow-chip span {
  margin-top: 0.1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 -1.5rem 1.15rem;
  padding: 1.05rem 1.5rem;
  border-bottom: 1px solid #dde8f6;
  background: #fbfdff;
  list-style: none;
}
.hero-facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6rem;
  align-items: center;
  min-width: 0;
  padding: 0 1rem;
  border-left: 1px solid #dce8f6;
}
.hero-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}
.fact-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 6px;
  color: #1673ef;
  background: #eaf3ff;
  font-size: 1rem;
  font-weight: 800;
}
.hero-facts strong {
  display: block;
  color: #14294e;
  font-size: var(--text-sm);
  line-height: 1.25;
}
.hero-facts li div > span {
  display: block;
  margin-top: 0.14rem;
  color: #687b9c;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.market-latest {
  margin: 0 -1.5rem 1.45rem;
  padding: 0.75rem 1rem 0.9rem;
  border: 1px solid #dce6f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgb(35 83 150 / 6%);
}
.market-latest-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.3rem;
  padding: 0 0.3rem;
}
.market-heading-tabs {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.market-latest-heading h3 {
  position: relative;
  margin: 0;
  color: #12284f;
  font-size: var(--text-md);
}
.market-latest-heading h3::after {
  position: absolute;
  right: 0;
  bottom: -0.82rem;
  left: 0;
  height: 2px;
  background: #1673ef;
  content: '';
}
.market-heading-tabs span {
  color: #6c7d9d;
  font-size: var(--text-sm);
}
.market-latest-heading > a {
  color: #1673ef;
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}
.market-latest-heading > a span {
  margin-left: 0.2rem;
}
.market-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 0.3rem 0.7rem;
  border-top: 1px solid #e1e9f5;
}
.market-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 1.78rem;
  padding: 0.23rem 0.68rem;
  border: 1px solid #e0e9f6;
  border-radius: 6px;
  color: #536987;
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}
.market-tabs a:hover {
  border-color: #a9cafa;
  color: #1469dc;
  background: #f4f8ff;
}
.market-tabs .is-active {
  border-color: #ffe0bf;
  color: #d75e00;
  background: #fff0e0;
}
.market-empty {
  padding: 1.3rem 0.3rem;
  color: var(--muted);
}
.market-list,
.market-list-labels {
  margin: 0;
  padding: 0;
  list-style: none;
}
.market-list-labels,
.market-list li {
  display: grid;
  grid-template-columns:
    minmax(0, 2.65fr) minmax(7.5rem, 0.88fr) minmax(7.4rem, 0.88fr) minmax(5rem, 0.54fr)
    1rem;
  gap: 1rem;
  align-items: center;
}
.market-list-labels {
  padding: 0.48rem 0.7rem;
  border: 1px solid #e1e9f5;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: #7d8eaa;
  background: #f7faff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.market-list {
  border: 1px solid #e1e9f5;
  border-radius: 0 0 6px 6px;
}
.market-list li {
  min-height: 3.8rem;
  padding: 0.58rem 0.7rem;
  border-top: 1px solid #e8eef6;
}
.market-list li:first-child {
  border-top: 0;
}
.market-list li:hover {
  background: #fbfdff;
}
.market-list li > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}
.market-list li > div > a {
  overflow: hidden;
  color: #172747;
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-list li > div > a:hover {
  color: #1469dc;
}
.market-list small {
  overflow: hidden;
  color: #6d7e9b;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-list strong {
  color: #172747;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 750;
}
.market-rail {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0.18rem 0.42rem;
  border-radius: 4px;
  color: #1469dc;
  background: #eaf3ff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-list li > a:nth-of-type(1) {
  color: #536987;
  font-size: var(--text-sm);
  text-decoration: none;
}
.market-open {
  color: #6f84a6 !important;
  font-size: 1.25rem !important;
  font-weight: 400;
  text-align: right;
  text-decoration: none;
}
.home-workflow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0 -1.5rem;
  padding: 0.1rem 0 1.1rem;
  border-bottom: 1px solid #dde8f6;
  background: transparent;
}
.workflow-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.workflow-heading h3 {
  margin: 0;
  color: #14294e;
  font-size: var(--text-lg);
}
.workflow-heading a {
  color: #1673ef;
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}
.home-workflow ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-workflow li {
  display: flex;
  gap: 0.7rem;
  padding: 0.15rem 1.2rem;
  border-left: 1px solid #dce8f6;
}
.home-workflow li:first-child {
  padding-left: 0;
  border-left: 0;
}
.home-workflow li + li {
  margin: 0;
}
.home-workflow li > span {
  display: grid;
  flex: 0 0 1.6rem;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: #1673ef;
  background: #eaf3ff;
  font-size: var(--text-xs);
  font-weight: 800;
}
.home-workflow strong {
  color: #172747;
  font-size: var(--text-sm);
}
.home-workflow p {
  margin: 0.15rem 0 0;
  color: #657899;
  font-size: var(--text-xs);
  line-height: 1.4;
}
.home-benefits {
  margin: 1.05rem -1.5rem 0;
  padding: 0.2rem 0 0;
}
.home-benefits h3 {
  margin: 0 0 0.75rem;
  color: #14294e;
  font-size: var(--text-md);
}
.home-benefits ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-benefits li {
  display: flex;
  gap: 0.62rem;
  padding: 0.2rem 1rem;
  border-left: 1px solid #dce8f6;
}
.home-benefits li:first-child {
  padding-left: 0;
  border-left: 0;
}
.home-benefits li > span {
  display: grid;
  flex: 0 0 1.72rem;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border-radius: 50%;
  color: var(--orange);
  background: #fff0e0;
  font-size: 0.92rem;
  font-weight: 800;
}
.home-benefits strong {
  display: block;
  color: #172747;
  font-size: var(--text-sm);
}
.home-benefits small {
  display: block;
  margin-top: 0.15rem;
  color: #71819d;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.page-home .market-latest,
.page-home .home-workflow,
.page-home .home-benefits {
  max-width: none;
}
.page-home main > .market-latest,
.page-home main > .home-workflow,
.page-home main > .home-benefits {
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.gig-list {
  margin: 1rem 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.gig-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.gig-card > a:first-child {
  color: var(--ink);
  font-weight: 720;
  text-decoration: none;
}
.gig-card > a:first-child:hover {
  color: #9c4e00;
}

.gig-summary {
  max-width: none;
  margin: 0 0 2.2rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.gig-summary h2 {
  margin-bottom: 0.45rem;
}
.gig-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
  margin: 0 0 1rem;
}
.gig-status {
  display: inline-block;
  color: #6a3900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gig-reward {
  margin: 0;
  color: var(--ink);
  font-size: 1.07rem;
}
.gig-reward strong {
  color: #914900;
  font-family: var(--font-sans);
  font-weight: 750;
}
.gig-next-step {
  max-width: 700px;
  margin: 1rem 0 0;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
}
.gig-next-step strong {
  display: block;
  margin-bottom: 0.12rem;
  font-size: 0.77rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gig-timeline {
  display: flex;
  gap: 0;
  max-width: 760px;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
.gig-timeline li {
  position: relative;
  flex: 1 1 0;
  padding: 1.35rem 0.45rem 0 0;
  border-top: 1px solid var(--line-dark);
  color: var(--muted);
  font-size: 0.76rem;
}
.gig-timeline li::before {
  position: absolute;
  top: -0.28rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: var(--paper);
  content: '';
}
.gig-timeline li.is-done,
.gig-timeline li.is-current {
  border-color: var(--orange);
  color: var(--ink);
}
.gig-timeline li.is-done::before,
.gig-timeline li.is-current::before {
  border-color: var(--orange);
  background: var(--orange);
}
.gig-timeline li.is-current {
  font-weight: 750;
}
.gig-details {
  display: grid;
  gap: 0.7rem 2rem;
  max-width: 760px;
  margin: 0;
}
.gig-details p {
  margin: 0;
}
.gig-details .label {
  display: block;
  margin-bottom: 0.12rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gig-section {
  max-width: 760px;
  margin: 2.2rem 0 0;
  padding-top: 0.1rem;
}
.gig-section > h3 {
  margin-top: 0;
}
.action-area {
  max-width: 760px;
  margin: 2.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
}
.action-area > h3 {
  margin-top: 0;
}
.action-area > form {
  margin: 0.9rem 0;
}
.action-area > form + form {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.advanced {
  max-width: 760px;
  margin: 2rem 0 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  background: #f6f5f1;
}
.advanced > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}
.advanced[open] > summary {
  margin-bottom: 0.75rem;
}

section[data-live-thread] {
  margin-top: 2.5rem;
  padding-top: 0.1rem;
  border-top: 1px solid var(--line);
}
section[data-live-thread] ol {
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
section[data-live-thread] li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
ol,
ul {
  padding-left: 1.25rem;
}
li + li {
  margin-top: 0.4rem;
}
details {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  background: #f6f5f1;
}
details > summary {
  cursor: pointer;
  font-weight: 700;
}
details[open] > summary {
  margin-bottom: 0.8rem;
}
img[alt*='QR'] {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 0.5rem;
  border: 1px solid var(--line-dark);
  background: #fff;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
th,
td {
  padding: 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-escrow-status][data-error='true'],
[data-live-error] {
  color: var(--danger);
  font-weight: 650;
}

@media (min-width: 700px) {
  .gig-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  body > header {
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 3.45rem;
    padding: 0 0.75rem;
  }
  .brand {
    padding-right: 0;
  }
  body > header > .brand > p {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line-dark);
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .nav-toggle span {
    font-size: 1.25rem;
    line-height: 0.8;
  }
  body > header nav {
    grid-column: 1 / -1;
    width: 100%;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  html[data-navigation-ready='true'] body > header nav {
    display: none;
  }
  html[data-navigation-ready='true'] body > header nav[data-open='true'] {
    display: block;
  }
  .nav-primary,
  .nav-account {
    display: block;
    border-left: 0;
  }
  .nav-account {
    margin-left: 0;
    border-top: 1px solid var(--line);
  }
  body > header nav a,
  body > header nav form button {
    display: flex;
    min-height: 2.8rem;
    padding-inline: 0.2rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-primary a:first-child {
    background: transparent;
  }
  .nav-create {
    display: inline-flex !important;
    justify-content: center;
    width: auto;
    margin: 0.55rem 0.2rem;
  }
  main {
    width: min(100% - 1.5rem, 960px);
    padding-top: 1.6rem;
  }
  input,
  textarea,
  select {
    width: 100%;
  }
  .market-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: -0.5rem -0.75rem 0;
    padding: 1.8rem 0.75rem 0;
  }
  .market-hero h2 {
    font-size: 2.7rem;
  }
  .market-art {
    min-height: 220px;
    margin-top: 0.5rem;
  }
  .art-client {
    top: 2rem;
    left: 0.5rem;
  }
  .art-worker {
    right: 0.5rem;
    bottom: 1.6rem;
  }
  .art-arbiter {
    top: 6.5rem;
    left: 31%;
  }
  .art-lock {
    top: 6rem;
    right: 21%;
  }
  .hero-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 0;
    margin: 0 -0.75rem 1rem;
    padding: 0.9rem 0.75rem;
  }
  .hero-facts li {
    padding: 0 0.55rem;
  }
  .hero-facts li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .hero-facts span {
    font-size: var(--text-xs);
  }
  .home-workflow {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 -0.75rem;
    padding: 1.35rem 0.75rem;
  }
  .home-workflow ol {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .home-workflow li {
    padding: 0;
    border-left: 0;
  }
  .market-latest {
    margin: 0 -0.75rem 1.2rem;
    padding: 0.9rem 0.75rem 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .market-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-inline: 0;
  }
  .market-tabs a {
    flex: 0 0 auto;
  }
  .market-list-labels {
    display: none;
  }
  .market-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.8rem;
    padding-inline: 0;
  }
  .market-list li > span,
  .market-list li > a:last-child {
    display: none;
  }
  .gig-timeline {
    overflow-x: auto;
    padding-bottom: 0.35rem;
  }
  .gig-timeline li {
    min-width: 6.2rem;
  }
  .gig-card {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .page-heading {
    align-items: flex-start;
  }
  table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 699px) {
  .market-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: -0.5rem -0.75rem 0;
  }
  .market-hero-copy {
    padding: 2rem 0.75rem 1.5rem;
  }
  .market-hero h2 {
    font-size: 2.75rem;
  }
  .market-art {
    min-height: 220px;
  }
  .art-escrow-chip {
    right: 15%;
    bottom: 16%;
    width: 4rem;
    height: 4rem;
  }
  .hero-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 0;
    margin: 0 -0.75rem 1rem;
    padding: 0.9rem 0.75rem;
  }
  .hero-facts li {
    padding: 0 0.45rem;
  }
  .hero-facts li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .market-latest {
    margin: 0 -0.75rem 1.2rem;
    padding: 0.65rem 0.75rem 0.75rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .market-heading-tabs {
    gap: 0.8rem;
  }
  .market-heading-tabs span {
    display: none;
  }
  .market-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: 0;
  }
  .market-tabs a {
    flex: 0 0 auto;
  }
  .market-list-labels {
    display: none;
  }
  .market-list li {
    grid-template-columns: minmax(0, 1fr) auto 0.8rem;
    gap: 0.35rem 0.6rem;
    padding-inline: 0.1rem;
  }
  .market-list li > a:nth-of-type(1),
  .market-list .market-rail {
    display: none;
  }
  .market-list strong {
    grid-column: 2;
    grid-row: 1;
  }
  .market-open {
    grid-column: 3;
    grid-row: 1;
  }
  .home-workflow {
    margin: 0 -0.75rem;
    padding: 0.1rem 0.75rem 1rem;
  }
  .home-workflow ol {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .home-workflow li {
    padding: 0;
    border-left: 0;
  }
  .home-benefits {
    margin: 1rem -0.75rem 0;
    padding: 0 0.75rem;
  }
  .home-benefits ul {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 0;
  }
  .home-benefits li {
    padding: 0 0.5rem;
  }
  .home-benefits li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .page-home main > .market-latest,
  .page-home main > .home-workflow,
  .page-home main > .home-benefits {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
  }
}

/* Gig marketplace */
.page-gigs main {
  width: min(1280px, calc(100% - 2rem));
  padding-top: 2rem;
}
.page-gigs main > .browse-hero,
.page-gigs .browse-results {
  max-width: none;
}
.page-gigs main > .browse-hero {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
.browse-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(21rem, 0.88fr);
  gap: 2rem;
  align-items: stretch;
  padding: 0.35rem 0 0.85rem;
}
.browse-hero-copy {
  padding: 1rem 0 0.5rem 2.6rem;
}
.browse-hero h2 {
  margin: 0.3rem 0 0.35rem;
  color: #081735;
  font-size: clamp(2.75rem, 4.1vw, 4rem);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 1;
}
.browse-hero-copy > p:not(.kicker) {
  margin: 0;
  color: #536887;
  font-size: var(--text-md);
}
.browse-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1.65rem 0 0;
  padding: 0;
  list-style: none;
}
.browse-facts li {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  padding: 0 1rem;
  border-left: 1px solid #dce8f6;
}
.browse-facts li:first-child {
  padding-left: 0;
  border-left: 0;
}
.browse-facts li > span {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  color: #1673ef;
  background: #eaf3ff;
  font-size: var(--text-sm);
  font-weight: 800;
}
.browse-facts strong,
.browse-facts small {
  display: block;
}
.browse-facts strong {
  color: #14294e;
  font-size: var(--text-sm);
  line-height: 1.25;
}
.browse-facts small {
  margin-top: 0.12rem;
  color: #71819d;
  font-size: var(--text-xs);
  line-height: 1.32;
}
.browse-promo {
  position: relative;
  min-height: 10.5rem;
  overflow: hidden;
  padding: 1.25rem 1.35rem;
  border: 1px solid #d9e6f7;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff 0%, #f3f8ff 100%);
}
.browse-promo > div {
  position: relative;
  z-index: 1;
  max-width: 15rem;
}
.browse-promo .kicker {
  color: #3879dc;
}
.browse-promo h3 {
  margin: 0.28rem 0 0.35rem;
  color: #10234a;
  font-size: var(--text-xl);
  letter-spacing: -0.04em;
}
.browse-promo p:not(.kicker) {
  margin: 0;
  color: #536887;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.browse-promo .button {
  min-height: 2.25rem;
  margin-top: 0.8rem;
  border-color: var(--orange);
  border-radius: 6px;
  background: var(--orange);
  font-size: var(--text-sm);
}
.browse-promo svg {
  position: absolute;
  right: -0.4rem;
  bottom: 0;
  width: 58%;
  height: 100%;
}
.browse-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.browse-filter-panel {
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.browse-filter-panel form {
  max-width: none;
  margin: 0;
  padding: 1rem;
}
.browse-filter-panel .filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.browse-filter-panel h3 {
  margin: 0;
  color: #10234a;
  font-size: var(--text-lg);
}
.browse-filter-panel .filter-heading a {
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}
.browse-filter-panel p {
  margin: 0 0 0.9rem;
}
.browse-filter-panel label {
  width: 100%;
  color: #263a60;
  font-size: var(--text-sm);
}
.filter-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.5rem;
  padding-left: 0.65rem;
  border: 1px solid #cedcf0;
  border-radius: 6px;
  color: #557096;
  background: #fff;
}
.filter-search input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.4rem 0.55rem 0.4rem 0;
  border: 0;
  border-radius: 0;
}
.browse-filter-panel fieldset {
  margin: 0;
  padding: 0.85rem 0;
  border-width: 1px 0 0;
}
.browse-filter-panel legend {
  padding: 0;
  color: #1f3358;
  font-size: var(--text-sm);
}
.browse-filter-panel select,
.browse-filter-panel input[type='number'] {
  width: 100%;
  min-height: 2.35rem;
  border-color: #cedcf0;
  border-radius: 6px;
  font-size: var(--text-sm);
}
.filter-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.35rem;
  align-items: end;
}
.filter-range > span {
  padding-bottom: 0.65rem;
  color: #71819d;
}
.browse-filter-panel button {
  width: 100%;
  margin-top: 0.7rem;
  border-color: #176ee5;
  border-radius: 6px;
  background: #176ee5;
  font-size: var(--text-sm);
}
.browse-results {
  overflow: hidden;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.browse-results-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid #dce6f4;
}
.browse-results-toolbar h3 {
  margin: 0;
  color: #10234a;
  font-size: var(--text-lg);
}
.browse-results-toolbar p {
  margin: 0.12rem 0 0;
  color: #71819d;
  font-size: var(--text-xs);
}
.browse-sort-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
}
.browse-sort-tabs a {
  padding: 0.58rem 0.7rem;
  border-bottom: 2px solid transparent;
  color: #526a8c;
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.browse-sort-tabs a:hover,
.browse-sort-tabs a.is-active {
  border-color: #1673ef;
  color: #1469dc;
}
.browse-post-button {
  min-height: 2.25rem;
  border-color: var(--orange);
  border-radius: 6px;
  background: var(--orange);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.browse-list,
.browse-list-head {
  margin: 0;
  padding: 0;
  list-style: none;
}
.browse-list-head,
.browse-list li {
  display: grid;
  grid-template-columns:
    minmax(15rem, 2.8fr) minmax(7rem, 0.86fr) minmax(8.2rem, 1fr) minmax(5.5rem, 0.72fr)
    minmax(5.8rem, 0.72fr) 1rem;
  gap: 1rem;
  align-items: center;
}
.browse-list-head {
  padding: 0.6rem 1.1rem;
  color: #7488a8;
  background: #f7faff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.browse-list li {
  min-height: 4.2rem;
  padding: 0.72rem 1.1rem;
  border-top: 1px solid #e3ebf6;
}
.browse-list li:hover {
  background: #fbfdff;
}
.browse-gig-title {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}
.browse-gig-title > a {
  overflow: hidden;
  color: #112547;
  font-size: var(--text-md);
  font-weight: 750;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-gig-title > a:hover {
  color: #1469dc;
}
.browse-gig-title small {
  overflow: hidden;
  color: #657999;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-rail {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0.26rem 0.5rem;
  border-radius: 5px;
  color: #1469dc;
  background: #eaf3ff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-list strong {
  color: #10234a;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 750;
}
.browse-client {
  overflow: hidden;
  color: #526a8c;
  font-size: var(--text-sm);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-status {
  display: grid;
  gap: 0.08rem;
  color: #37658e;
  font-size: var(--text-sm);
  font-weight: 650;
}
.browse-status small {
  color: #71819d;
  font-size: var(--text-xs);
  text-transform: capitalize;
}
.browse-open {
  color: #557398;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: right;
  text-decoration: none;
}
.browse-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-top: 1px solid #e3ebf6;
}
.browse-pagination a,
.browse-pagination span {
  font-size: var(--text-sm);
}
.browse-pagination a {
  padding: 0.45rem 0.65rem;
  border: 1px solid #cdddf3;
  border-radius: 6px;
  color: #1469dc;
  text-decoration: none;
}
.browse-empty {
  padding: 3.5rem 1.2rem;
  text-align: center;
}
.browse-empty h4 {
  margin: 0;
  font-size: var(--text-lg);
}
.browse-empty p {
  margin: 0.4rem auto 0.8rem;
  color: #657999;
  font-size: var(--text-sm);
}

@media (max-width: 899px) {
  .page-gigs main {
    width: min(100% - 1.5rem, 760px);
    padding-top: 1.25rem;
  }
  .browse-hero {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .browse-hero-copy {
    padding: 0.5rem 0;
  }
  .browse-promo {
    min-height: 11rem;
  }
  .browse-layout {
    grid-template-columns: 1fr;
  }
  .browse-filter-panel form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .browse-filter-panel .filter-heading,
  .browse-filter-panel p,
  .browse-filter-panel button {
    grid-column: 1 / -1;
  }
  .browse-filter-panel fieldset {
    margin: 0;
    padding: 0.2rem 0 0;
    border: 0;
  }
  .browse-results-toolbar {
    grid-template-columns: 1fr auto;
  }
  .browse-sort-tabs {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
  }
}
@media (max-width: 699px) {
  .page-gigs main {
    width: min(100% - 1.5rem, 760px);
    padding-top: 1rem;
  }
  .browse-hero h2 {
    font-size: 2.75rem;
  }
  .browse-hero-copy {
    padding-top: 0.25rem;
  }
  .browse-hero-copy > p:not(.kicker) {
    font-size: var(--text-base);
  }
  .browse-facts {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin-top: 1.25rem;
  }
  .browse-facts li,
  .browse-facts li:first-child {
    padding: 0;
    border: 0;
  }
  .browse-promo {
    min-height: 13rem;
    padding: 1.1rem;
  }
  .browse-promo svg {
    width: 64%;
    opacity: 0.85;
  }
  .browse-filter-panel form {
    display: block;
  }
  .browse-filter-panel fieldset {
    margin: 0;
    padding: 0.8rem 0;
    border-top: 1px solid #e3ebf6;
  }
  .browse-results-toolbar {
    display: flex;
    flex-wrap: wrap;
    min-height: 0;
    padding: 0.85rem;
  }
  .browse-sort-tabs {
    width: 100%;
    justify-content: flex-start;
  }
  .browse-sort-tabs a {
    padding-inline: 0.58rem;
    font-size: var(--text-xs);
  }
  .browse-post-button {
    margin-left: auto;
  }
  .browse-list-head {
    display: none;
  }
  .browse-list li {
    grid-template-columns: minmax(0, 1fr) auto 0.8rem;
    gap: 0.45rem 0.55rem;
    min-height: 0;
    padding: 0.85rem;
  }
  .browse-gig-title {
    grid-column: 1;
    grid-row: 1;
  }
  .browse-gig-title > a {
    font-size: var(--text-base);
    white-space: normal;
  }
  .browse-gig-title small {
    display: none;
  }
  .browse-list strong {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-sm);
  }
  .browse-open {
    grid-column: 3;
    grid-row: 1;
  }
  .browse-rail {
    grid-column: 1;
    grid-row: 2;
  }
  .browse-client {
    display: none;
  }
  .browse-status {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: end;
    font-size: var(--text-xs);
  }
  .browse-pagination {
    justify-content: space-between;
    padding: 0.85rem;
  }
}

/* Gig detail */
.page-gig main {
  width: min(1280px, calc(100% - 2rem));
  padding-top: 1.35rem;
}
.gig-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: 1rem;
  align-items: start;
}
.gig-main {
  min-width: 0;
}
.gig-back {
  display: inline-flex;
  margin: 0 0 1rem;
  color: #1469dc;
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}
.gig-summary {
  max-width: none;
  margin: 0;
  padding: 1.55rem 1.6rem 1.25rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.gig-summary h2 {
  margin: 0;
  color: #081735;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1.05;
}
.gig-status-line {
  gap: 0.45rem;
  margin: 0.75rem 0 0;
  color: #6b7e9e;
  font-size: var(--text-sm);
}
.gig-status {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  color: #1469dc;
  background: #eaf3ff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0;
}
.gig-reward {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: #556b8e;
  font-size: var(--text-sm);
}
.gig-reward strong {
  color: #10234a;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
}
.gig-timeline {
  max-width: none;
  margin: 1.55rem 0 0;
}
.gig-timeline li {
  padding-top: 1rem;
  color: #6b7e9e;
  font-size: var(--text-xs);
}
.gig-timeline li.is-done,
.gig-timeline li.is-current {
  color: #10234a;
}
.gig-section {
  max-width: none;
  margin: 1rem 0 0;
  padding: 1.3rem 1.6rem 1.45rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.gig-section > h3,
.gig-main > h3 {
  margin: 0 0 0.55rem;
  color: #10234a;
  font-size: var(--text-xl);
}
.gig-section > h3 + p {
  margin-top: 0;
}
.gig-section p {
  max-width: 70ch;
  color: #4f6688;
  font-size: var(--text-base);
  line-height: 1.48;
}
.gig-section > h3:not(:first-child) {
  margin-top: 1.55rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e2ebf6;
}
.gig-main > h3:not(.action-area h3) {
  margin: 1.25rem 0 0.5rem;
}
.gig-main > h3 + p {
  color: #506886;
}
.gig-main > section[aria-labelledby] {
  max-width: none;
  margin: 1rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.gig-main > section[aria-labelledby] h4 {
  margin-top: 0;
}
.gig-main > section[aria-labelledby] img {
  max-width: min(100%, 20rem);
}
.action-area {
  max-width: none;
  margin: 1rem 0 0;
  padding: 1.3rem 1.6rem;
  border: 1px solid #dce6f4;
  border-top: 3px solid #10234a;
  border-radius: 9px;
  background: #fff;
}
.action-area > h3 {
  margin: 0 0 0.75rem;
  color: #10234a;
  font-size: var(--text-xl);
}
.action-area > p {
  max-width: 70ch;
  color: #506886;
}
.action-area > form {
  max-width: 100%;
  margin: 0.9rem 0;
  padding: 0.9rem 0 0;
}
.action-area > form + form {
  border-top-color: #e3ebf6;
}
.action-area form button,
.gig-main > form button {
  border-radius: 6px;
}
.gig-main > form,
.gig-main > fieldset {
  max-width: none;
}
.gig-main > form:not(.action-area form) {
  margin: 0.75rem 0 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.gig-main > h3[id],
.gig-main > h3 + form {
  scroll-margin-top: 1rem;
}
.gig-applications {
  display: grid;
  gap: 0.7rem;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gig-applications li {
  padding: 1rem 1.1rem;
  border: 1px solid #dce6f4;
  border-radius: 8px;
  background: #fff;
}
.gig-applications li + li {
  margin: 0;
}
.gig-applications form {
  margin: 0.8rem 0 0;
}
.gig-applications form button {
  min-height: 2.2rem;
  border-color: #176ee5;
  border-radius: 6px;
  background: #176ee5;
  font-size: var(--text-sm);
}
.advanced {
  max-width: none;
  margin: 1rem 0;
  border-color: #d8e4f2;
  border-radius: 7px;
  background: #f7faff;
}
.gig-sidebar {
  display: grid;
  gap: 0.85rem;
  position: sticky;
  top: 1rem;
}
.gig-sidebar-next {
  padding: 1.15rem;
  border: 1px solid #ff8c37;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #ff8b22, #ff6f14);
  box-shadow: 0 8px 16px rgb(255 112 20 / 18%);
}
.gig-sidebar-next .kicker {
  color: #fff3e8;
  font-size: 0.75rem;
}
.gig-sidebar-next > p:not(.kicker) {
  margin: 0.38rem 0 0;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 650;
  line-height: 1.35;
}
.gig-sidebar-next .button {
  width: 100%;
  margin-top: 0.9rem;
  border-color: #fff;
  border-radius: 6px;
  color: #d85b05;
  background: #fff;
  font-size: var(--text-sm);
}
.gig-sidebar-next .button:hover {
  color: #c54f00;
  background: #fff7f0;
}
.gig-side-card {
  max-width: none;
  margin: 0;
  padding: 1.15rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.gig-side-card h3 {
  margin: 0 0 0.75rem;
  color: #10234a;
  font-size: var(--text-lg);
}
.gig-side-card .gig-details {
  display: grid;
  gap: 0;
  max-width: none;
  margin: 0;
}
.gig-side-card .gig-details p {
  margin: 0;
  padding: 0.82rem 0;
  border-top: 1px solid #e3ebf6;
  color: #516889;
  font-size: var(--text-sm);
  line-height: 1.42;
}
.gig-side-card .gig-details p:first-child {
  border-top: 0;
}
.gig-side-card .gig-details .label {
  margin-bottom: 0.25rem;
  color: #7184a4;
  font-size: 0.75rem;
}
.gig-side-card .gig-details strong {
  color: #10234a;
  font-size: var(--text-base);
}
.gig-side-card .gig-details code {
  display: inline-block;
  margin-top: 0.22rem;
  font-size: 0.75rem;
}
.gig-escrow-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 1rem 1.05rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #f5faff;
}
.gig-escrow-note > span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  color: #1673ef;
  background: #e1efff;
  font-size: var(--text-sm);
  font-weight: 800;
}
.gig-escrow-note strong {
  display: block;
  color: #17315b;
  font-size: var(--text-sm);
  line-height: 1.3;
}
.gig-escrow-note p {
  margin: 0.18rem 0 0;
  color: #5e7596;
  font-size: var(--text-xs);
  line-height: 1.36;
}
.gig-apply-link {
  width: 100%;
  min-height: 2.7rem;
  border-color: var(--orange);
  border-radius: 7px;
  background: var(--orange);
  font-size: var(--text-base);
}
.page-gig section[data-live-thread] {
  max-width: none;
  margin-top: 1rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.page-gig section[data-live-thread] ol {
  border-top-color: #e3ebf6;
}
.page-gig section[data-live-thread] li {
  border-bottom-color: #e3ebf6;
}

@media (max-width: 999px) {
  .page-gig main {
    width: min(100% - 1.5rem, 780px);
  }
  .gig-page-layout {
    grid-template-columns: 1fr;
  }
  .gig-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gig-sidebar-next {
    grid-column: 1 / -1;
  }
  .gig-apply-link {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .page-gig main {
    width: min(100% - 1.5rem, 760px);
    padding-top: 1rem;
  }
  .gig-back {
    margin-bottom: 0.75rem;
  }
  .gig-summary {
    padding: 1.15rem 1rem 1rem;
  }
  .gig-summary h2 {
    font-size: 2rem;
  }
  .gig-timeline {
    overflow-x: auto;
  }
  .gig-timeline li {
    min-width: 5.6rem;
  }
  .gig-section,
  .action-area {
    padding: 1.1rem 1rem;
  }
  .gig-sidebar {
    grid-template-columns: 1fr;
  }
  .gig-side-card,
  .gig-sidebar-next {
    padding: 1rem;
  }
  .gig-main > form:not(.action-area form) {
    padding: 1rem;
  }
}

/* Reusable interface primitives */
.ui-card {
  max-width: none;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.ui-section-heading {
  margin: 0;
  color: #10234a;
  font-size: var(--text-lg);
  letter-spacing: -0.03em;
}
.ui-stat-list {
  display: grid;
  gap: 0;
}
.ui-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid #e3ebf6;
  color: #607594;
  font-size: var(--text-sm);
}
.ui-stat-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.ui-stat-row:last-child {
  padding-bottom: 0;
}
.ui-stat-row strong {
  color: #10234a;
  font-size: var(--text-sm);
  text-align: right;
}

/* Public member profile */
.page-profile main {
  width: min(1120px, calc(100% - 2rem));
  padding-top: 1.35rem;
}
.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 0 1.5rem 1.25rem;
}
.profile-avatar {
  display: grid;
  place-items: center;
  width: 6.8rem;
  height: 6.8rem;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #60b6ff, #176ee5);
  box-shadow:
    0 2px 0 #cbdcf2,
    0 7px 18px rgb(30 86 159 / 14%);
}
.profile-avatar span {
  font-size: 2.5rem;
  font-weight: 850;
  letter-spacing: -0.08em;
}
.profile-identity h2 {
  margin: 0.15rem 0 0;
  color: #081735;
  font-size: clamp(2rem, 3vw, 2.55rem);
  font-weight: 850;
  letter-spacing: -0.055em;
}
.profile-role {
  margin: 0.15rem 0 0;
  color: #667b9c;
  font-size: var(--text-md);
}
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.35rem;
  margin: 0.6rem 0 0;
  color: #587093;
  font-size: var(--text-sm);
}
.profile-meta span {
  display: inline-flex;
  gap: 0.25rem;
}
.profile-meta strong {
  color: #18325c;
}
.profile-notice {
  margin: 0.55rem 0 0;
  color: #a45a00;
  font-size: var(--text-sm);
}
.profile-notice-danger {
  color: var(--danger);
}
.profile-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.profile-actions form {
  margin: 0;
}
.profile-actions .button {
  min-height: 2.5rem;
  border-radius: 6px;
  color: #1469dc;
  background: #fff;
}
.profile-report {
  max-width: 19rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.profile-report > summary {
  padding: 0.55rem 0.2rem;
  color: #617697;
  font-size: var(--text-sm);
  font-weight: 650;
}
.profile-report[open] {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  top: 8rem;
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.9rem;
  border: 1px solid #dce6f4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(31 70 123 / 13%);
}
.profile-report form {
  margin: 0;
}
.profile-report textarea {
  width: 100%;
}
.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.25rem;
  gap: 1rem;
  align-items: start;
}
.profile-main {
  min-width: 0;
}
.profile-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.9rem;
  padding: 0 0.65rem;
  border: 1px solid #dce6f4;
  border-radius: 9px;
  background: #fff;
}
.profile-tabs a {
  padding: 0.78rem 0.7rem 0.65rem;
  border-bottom: 2px solid transparent;
  color: #526988;
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}
.profile-tabs a:hover,
.profile-tabs a.is-active {
  border-color: #1673ef;
  color: #1469dc;
}
.profile-overview {
  color: #506887;
}
.profile-overview > p {
  max-width: 68ch;
  margin: 0.65rem 0 0;
  font-size: var(--text-base);
  line-height: 1.48;
}
.profile-work-record {
  margin-top: 1.45rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e3ebf6;
}
.profile-work-record .ui-section-heading {
  margin-bottom: 0.75rem;
}
.profile-reviews {
  margin-top: 1rem;
}
.profile-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.profile-section-heading > span {
  color: #68809f;
  font-size: var(--text-xs);
}
.profile-empty {
  margin: 0.75rem 0 0;
  color: #627895;
  font-size: var(--text-sm);
}
.profile-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.profile-review-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  margin: 0;
  padding: 0.95rem;
  border: 1px solid #e1e9f5;
  border-radius: 7px;
  background: #fbfdff;
}
.profile-review-score {
  display: grid;
  align-content: start;
  min-width: 2.5rem;
}
.profile-review-score strong {
  color: #f2760b;
  font-size: var(--text-sm);
}
.profile-review-score span {
  color: #7085a3;
  font-size: 0.75rem;
}
.profile-review-list p {
  margin: 0;
  color: #526a8d;
  font-size: var(--text-sm);
}
.profile-review-list blockquote {
  margin: 0.4rem 0 0;
  color: #576f90;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.profile-sidebar {
  display: grid;
  gap: 0.85rem;
  position: sticky;
  top: 1rem;
}
.profile-glance .ui-section-heading,
.profile-reputation .ui-section-heading,
.profile-protocol .ui-section-heading {
  margin-bottom: 0.9rem;
}
.profile-rating {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid #e3ebf6;
}
.profile-rating + .profile-rating {
  padding-bottom: 0;
}
.profile-rating > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #f2760b;
  background: #fff1e0;
  font-size: var(--text-md);
}
.profile-rating strong,
.profile-rating small {
  display: block;
}
.profile-rating strong {
  color: #10234a;
  font-size: var(--text-sm);
}
.profile-rating small {
  margin-top: 0.08rem;
  color: #7184a2;
  font-size: var(--text-xs);
}
.profile-protocol {
  background: #f5faff;
}
.profile-protocol p {
  margin: 0.55rem 0 0;
  color: #5d7596;
  font-size: var(--text-sm);
  line-height: 1.4;
}

@media (max-width: 899px) {
  .page-profile main {
    width: min(100% - 1.5rem, 760px);
  }
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-protocol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .page-profile main {
    width: min(100% - 1.5rem, 760px);
    padding-top: 1rem;
  }
  .profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0 0 1rem;
  }
  .profile-avatar {
    width: 4.5rem;
    height: 4.5rem;
  }
  .profile-avatar span {
    font-size: 1.75rem;
  }
  .profile-identity h2 {
    font-size: 1.75rem;
  }
  .profile-role {
    font-size: var(--text-base);
  }
  .profile-actions {
    grid-column: 1 / -1;
  }
  .profile-report[open] {
    right: 0.75rem;
    top: 10.5rem;
  }
  .profile-tabs {
    overflow-x: auto;
    padding-inline: 0.45rem;
  }
  .profile-tabs a {
    flex: 0 0 auto;
  }
  .profile-review-list {
    grid-template-columns: 1fr;
  }
  .profile-sidebar {
    grid-template-columns: 1fr;
  }
  .profile-protocol {
    grid-column: auto;
  }
}

.page-profile main > .profile-hero {
  max-width: none;
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  border: 0;
}

.page-profile .profile-page > .profile-hero {
  max-width: none;
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  border: 0;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.22rem 0.6rem;
  border-radius: 5px;
  color: #3f638d;
  background: #eef5ff;
  font-size: var(--text-xs);
  font-weight: 650;
}

/* Post a gig */
.page-newGig main {
  width: min(1280px, calc(100% - 2rem));
  padding-top: 0;
}
.post-gig-page {
  padding-bottom: 3rem;
}
.post-gig-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(25rem, 0.88fr);
  min-height: 12rem;
  align-items: center;
  margin: 0 0 0.8rem;
  padding: 1.45rem 2.65rem 0.8rem;
  overflow: hidden;
  background: linear-gradient(120deg, #fff 0%, #f7fbff 48%, #edf6ff 100%);
}
.post-gig-hero h2 {
  margin: 0.25rem 0 0.45rem;
  color: #081735;
  font-size: clamp(2.8rem, 4.3vw, 4rem);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 1;
}
.post-gig-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.post-gig-hero p {
  max-width: 36ch;
  margin: 0;
  color: #536987;
  font-size: var(--text-md);
  line-height: 1.4;
}
.post-gig-art {
  align-self: stretch;
  min-height: 10rem;
}
.post-gig-art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.post-gig-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25.5rem;
  gap: 1rem;
  align-items: start;
  padding: 0 1.2rem;
}
.post-gig-form {
  padding: 0;
  overflow: hidden;
}
.post-gig-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid #e0eaf6;
  list-style: none;
}
.post-gig-steps li {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  padding: 0 1rem;
  border-left: 1px solid #dce8f6;
}
.post-gig-steps li:first-child {
  padding-left: 0;
  border-left: 0;
}
.post-gig-steps li > span {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #cbd9ed;
  border-radius: 50%;
  color: #66809e;
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 750;
}
.post-gig-steps li.is-current > span {
  border-color: #176ee5;
  color: #fff;
  background: #176ee5;
  box-shadow: 0 4px 9px rgb(23 110 229 / 20%);
}
.post-gig-steps strong,
.post-gig-steps small {
  display: block;
}
.post-gig-steps strong {
  color: #1a3159;
  font-size: var(--text-sm);
}
.post-gig-steps small {
  margin-top: 0.08rem;
  color: #7588a5;
  font-size: var(--text-xs);
}
.post-form-section {
  max-width: none;
  margin: 0;
  padding: 1.35rem;
  border: 0;
  border-top: 1px solid #e0eaf6;
}
.post-form-section:first-of-type {
  border-top: 0;
}
.post-section-heading {
  margin-bottom: 1rem;
}
.post-section-heading > p {
  margin: 0.22rem 0 0;
  color: #7083a2;
  font-size: var(--text-sm);
}
.post-gig-form p {
  max-width: none;
  margin: 0.9rem 0;
}
.post-gig-form label {
  width: 100%;
  color: #20365e;
  font-size: var(--text-sm);
}
.post-gig-form input:not([type='checkbox']):not([type='radio']),
.post-gig-form textarea {
  width: 100%;
  border-color: #cedcf0;
  border-radius: 6px;
}
.post-gig-form textarea {
  min-height: 8rem;
}
.post-gig-form label + small,
.post-gig-form p > small {
  display: block;
  margin-top: 0.35rem;
  color: #7184a2;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.post-gig-form fieldset {
  max-width: none;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-color: #dce6f4;
  border-radius: 7px;
}
.post-gig-form fieldset legend {
  color: #253b64;
  font-size: var(--text-sm);
}
.post-gig-form fieldset p {
  margin: 0.45rem 0;
}
.post-gig-form fieldset label {
  width: auto;
}
.post-gig-form .post-refund-address {
  margin-top: 0.85rem;
}
.post-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.post-publish-section {
  background: #fbfdff;
}
.post-fee-note {
  padding: 0.85rem 0.95rem;
  border-left: 3px solid #f58220;
  color: #536a8a;
  background: #fff6ed;
  font-size: var(--text-sm);
  line-height: 1.42;
}
.post-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1rem;
}
.post-form-actions .button,
.post-form-actions button {
  min-height: 2.6rem;
  border-radius: 6px;
}
.post-form-actions button {
  min-width: 8.5rem;
  border-color: var(--orange);
  background: var(--orange);
}
.post-gig-sidebar {
  display: grid;
  gap: 0.85rem;
  position: sticky;
  top: 1rem;
}
.post-preview .post-section-heading {
  margin-bottom: 0.85rem;
}
.post-preview-paper {
  padding: 1rem;
  border: 1px solid #dce7f4;
  border-radius: 7px;
  background: #fbfdff;
}
.post-preview-paper > strong {
  display: block;
  max-width: 68%;
  color: #14284c;
  font-size: var(--text-md);
  line-height: 1.25;
}
.post-preview-sats {
  display: block;
  margin-top: 0.55rem;
  color: #10234a;
  font-size: var(--text-base);
  font-weight: 750;
}
.post-preview-paper > p {
  margin: 0.8rem 0;
  color: #617896;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.post-preview-paper > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.post-preview-paper dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid #e3ebf6;
}
.post-preview-paper dl div {
  display: grid;
  gap: 0.1rem;
}
.post-preview-paper dt {
  color: #7184a2;
  font-size: var(--text-xs);
}
.post-preview-paper dd {
  margin: 0;
  color: #16305a;
  font-size: var(--text-sm);
  font-weight: 700;
}
.post-escrow-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  background: #fff8ee;
}
.post-escrow-card > span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
  font-size: var(--text-sm);
  font-weight: 800;
}
.post-escrow-card p {
  margin: 0.35rem 0 0;
  color: #637694;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.post-tips ul {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.post-tips li {
  position: relative;
  padding-left: 1.25rem;
  color: #5d7494;
  font-size: var(--text-sm);
}
.post-tips li::before {
  position: absolute;
  left: 0;
  color: #16a36a;
  content: '✓';
  font-weight: 800;
}

@media (max-width: 999px) {
  .page-newGig main {
    width: min(100% - 1.5rem, 780px);
  }
  .post-gig-hero {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.68fr);
    padding-inline: 1.2rem;
  }
  .post-gig-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .post-gig-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .post-preview {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .page-newGig main {
    width: min(100% - 1.5rem, 760px);
  }
  .post-gig-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 0 -0.75rem 0.75rem;
    padding: 1.4rem 0.75rem 0;
  }
  .post-gig-hero h2 {
    font-size: 2.8rem;
  }
  .post-gig-art {
    min-height: 8rem;
  }
  .post-gig-layout {
    padding: 0;
  }
  .post-gig-steps {
    gap: 0.45rem;
    padding: 0.9rem;
  }
  .post-gig-steps li {
    padding: 0;
    border: 0;
  }
  .post-gig-steps li > span {
    flex-basis: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
  }
  .post-gig-steps small {
    display: none;
  }
  .post-form-section {
    padding: 1.05rem;
  }
  .post-two-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .post-gig-sidebar {
    grid-template-columns: 1fr;
  }
}

.ui-chip-success {
  color: #147347;
  background: #e6f7ee;
}

/* Edit a gig — reuses the editor primitives from Post a gig */
.page-editGig main {
  width: min(1280px, calc(100% - 2rem));
  padding-top: 1.25rem;
}
.edit-gig-page {
  padding-bottom: 3rem;
}
.edit-gig-page > .gig-back {
  margin-left: 1.2rem;
}
.edit-gig-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  padding: 0.7rem 2.65rem 1.2rem;
}
.edit-gig-header h2 {
  margin: 0.2rem 0 0.3rem;
  color: #081735;
  font-size: clamp(2.55rem, 4vw, 3.6rem);
  font-weight: 850;
  letter-spacing: -0.065em;
  line-height: 1;
}
.edit-gig-header h2 em {
  color: var(--orange);
  font-style: normal;
}
.edit-gig-header p {
  margin: 0;
  color: #5a6f91;
  font-size: var(--text-md);
}
.edit-gig-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-bottom: 0.25rem;
}
.edit-gig-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25.5rem;
  gap: 1rem;
  align-items: start;
  padding: 0 1.2rem;
}
.gig-editor-form {
  padding: 0;
  overflow: hidden;
}
.gig-editor-form .post-form-section {
  padding: 1.35rem;
}
.editor-step-heading {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.editor-step-heading > span {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: #176ee5;
  font-size: var(--text-sm);
  font-weight: 800;
}
.editor-step-heading .ui-section-heading {
  margin-top: 0.12rem;
}
.editor-step-heading p {
  margin: 0.18rem 0 0;
  color: #7184a2;
  font-size: var(--text-sm);
}
.gig-editor-form p {
  max-width: none;
  margin: 0.9rem 0;
}
.gig-editor-form label {
  width: 100%;
  color: #20365e;
  font-size: var(--text-sm);
}
.gig-editor-form input,
.gig-editor-form textarea {
  width: 100%;
  border-color: #cedcf0;
  border-radius: 6px;
}
.gig-editor-form textarea {
  min-height: 8rem;
}
.gig-editor-form label + small,
.gig-editor-form p > small {
  display: block;
  margin-top: 0.35rem;
  color: #7184a2;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.gig-editor-form fieldset {
  max-width: none;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-color: #dce6f4;
  border-radius: 7px;
}
.gig-editor-form fieldset legend {
  color: #253b64;
  font-size: var(--text-sm);
}
.gig-editor-form fieldset p {
  margin: 0.45rem 0;
}
.gig-editor-form fieldset label {
  width: auto;
}
.editor-readonly {
  padding: 0.72rem 0.85rem;
  border: 1px solid #dce6f4;
  border-radius: 6px;
  background: #f7faff;
}
.editor-readonly > span,
.editor-readonly strong {
  display: block;
}
.editor-readonly > span {
  color: #7184a2;
  font-size: var(--text-xs);
}
.editor-readonly strong {
  margin-top: 0.15rem;
  color: #17305a;
  font-size: var(--text-md);
}
.gig-editor-form .post-form-actions {
  margin: 0.25rem 0 0;
}
.edit-gig-sidebar {
  display: grid;
  gap: 0.85rem;
  position: sticky;
  top: 1rem;
}
.edit-preview .post-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}
.edit-preview .post-section-heading a {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}
.edit-policy-card ul {
  display: grid;
  gap: 0.48rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.edit-policy-card li {
  position: relative;
  padding-left: 1.2rem;
  color: #5d7494;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.edit-policy-card li::before {
  position: absolute;
  left: 0;
  color: #176ee5;
  content: '•';
  font-weight: 800;
}
.edit-cancel-card {
  border-color: #f0d4cf;
  background: #fffafa;
}
.edit-cancel-card p {
  margin: 0.45rem 0 0.85rem;
  color: #786461;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.edit-cancel-card form {
  margin: 0;
}
.edit-cancel-card button {
  width: 100%;
  min-height: 2.45rem;
  border-color: #a93d31;
  border-radius: 6px;
  background: #a93d31;
  font-size: var(--text-sm);
}
.edit-cancel-card button:hover {
  background: #8b2d23;
}

@media (max-width: 999px) {
  .page-editGig main {
    width: min(100% - 1.5rem, 780px);
  }
  .edit-gig-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .edit-gig-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .edit-preview {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .page-editGig main {
    width: min(100% - 1.5rem, 760px);
    padding-top: 1rem;
  }
  .edit-gig-page > .gig-back {
    margin-left: 0;
  }
  .edit-gig-header {
    display: block;
    padding: 0.5rem 0 1rem;
  }
  .edit-gig-header h2 {
    font-size: 2.75rem;
  }
  .edit-gig-badges {
    justify-content: flex-start;
    margin-top: 0.75rem;
  }
  .edit-gig-layout {
    padding: 0;
  }
  .gig-editor-form .post-form-section {
    padding: 1.05rem;
  }
  .post-two-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .edit-gig-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Wallet: browser-held escrow keys, never a custodial balance. */
.page-wallet main {
  width: min(1280px, calc(100% - 3rem));
  padding-top: 0;
}
.wallet-page {
  padding: 0 0 3rem;
}
.wallet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr);
  min-height: 11rem;
  align-items: end;
  gap: 1rem;
  padding: 1.65rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fbff 5%, #edf5ff 100%);
}
.wallet-hero-copy {
  padding-bottom: 1.35rem;
}
.wallet-hero h2 {
  margin: 0.1rem 0 0.35rem;
  font-size: clamp(2.45rem, 5vw, 3.5rem);
  letter-spacing: -0.058em;
}
.wallet-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.wallet-hero p {
  margin: 0;
  color: #566b90;
  font-size: var(--text-md);
}
.wallet-hero-art {
  align-self: stretch;
  overflow: hidden;
}
.wallet-hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 9rem;
}
.wallet-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.wallet-facts > section {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  min-height: 5.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.wallet-facts small,
.wallet-facts strong {
  display: block;
}
.wallet-facts small {
  color: #607496;
  font-size: var(--text-xs);
}
.wallet-facts strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--text-sm);
}
.wallet-fact-icon {
  display: grid;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  color: #1469dc;
  background: #edf5ff;
  font-size: 1rem;
  font-weight: 800;
}
.wallet-facts > section:first-child .wallet-fact-icon {
  color: #e96b00;
  background: var(--orange-soft);
}
.wallet-notice {
  max-width: none;
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid #eed5a4;
  border-left: 3px solid var(--orange);
  border-radius: 5px;
  color: #604b26;
  background: #fffaf0;
}
.wallet-notice-success {
  border-color: #b9dfca;
  border-left-color: #23814c;
  color: #245d3a;
  background: #f2fbf5;
}
.wallet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 1rem;
  align-items: start;
}
.wallet-main,
.wallet-sidebar {
  display: grid;
  gap: 1rem;
}
.wallet-sidebar {
  position: sticky;
  top: 1rem;
}
.wallet-page .ui-card {
  border-radius: 8px;
  box-shadow: none;
}
.wallet-key-card,
.wallet-recovery-card,
.wallet-restore-card,
.wallet-setup-card,
.wallet-admin-card {
  padding: 1.25rem;
}
.wallet-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.wallet-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.wallet-section-heading .ui-eyebrow {
  margin: 0 0 0.2rem;
}
.wallet-section-heading .ui-section-heading,
.wallet-setup-card .ui-section-heading,
.wallet-admin-card .ui-section-heading {
  margin: 0;
}
.wallet-status,
.wallet-subtle-tag {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 750;
}
.wallet-status {
  color: #1e7043;
  background: #e4f7ea;
}
.wallet-subtle-tag {
  color: #875009;
  background: #fff0dc;
}
.wallet-key-summary {
  margin: 0.7rem 0;
  color: #587096;
}
.wallet-key-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.wallet-key-details div {
  min-width: 0;
  padding: 0.68rem 0.75rem;
}
.wallet-key-details div + div {
  border-left: 1px solid var(--line);
}
.wallet-key-details dt {
  margin-bottom: 0.15rem;
  color: #65789b;
  font-size: var(--text-xs);
}
.wallet-key-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.wallet-key-details code {
  font-size: 0.78rem;
}
.wallet-key-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.wallet-key-actions .button {
  min-height: 2.35rem;
  padding: 0.48rem 0.75rem;
  font-size: var(--text-sm);
}
.wallet-key-actions span {
  color: #667998;
  font-size: var(--text-xs);
}
.wallet-retired-note {
  max-width: none;
  margin: -0.25rem 0 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid #e8ab36;
  color: #64502b;
  background: #fffaf0;
  font-size: var(--text-sm);
}
.wallet-recovery-card > p,
.wallet-restore-card > p,
.wallet-setup-card > p {
  max-width: 75ch;
  color: #587096;
}
.wallet-page form {
  max-width: none;
  margin: 0.85rem 0 0;
}
.wallet-page form p {
  max-width: none;
}
.wallet-inline-form {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
}
.wallet-inline-form label {
  flex: 1 1 16rem;
}
.wallet-inline-form input {
  width: 100%;
}
.wallet-inline-form button {
  min-height: 2.45rem;
  margin-bottom: 0;
  white-space: nowrap;
}
.wallet-page [data-mnemonic-reveal] {
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid #e9bc74;
  border-radius: 6px;
  background: #fffaf0;
}
.wallet-page [data-mnemonic-words] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  font-weight: 700;
}
.wallet-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.wallet-restore-card textarea,
.wallet-setup-card textarea {
  width: 100%;
  resize: vertical;
}
.wallet-restore-card small,
.wallet-setup-card small {
  display: block;
  margin-top: 0.25rem;
  color: #6c7f9f;
  font-size: var(--text-xs);
}
.wallet-rotate-card {
  padding: 0;
  overflow: hidden;
}
.wallet-rotate-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.wallet-rotate-card summary::-webkit-details-marker {
  display: none;
}
.wallet-rotate-card summary strong,
.wallet-rotate-card summary small {
  display: block;
}
.wallet-rotate-card summary small {
  margin-top: 0.1rem;
  color: #637797;
  font-size: var(--text-xs);
}
.wallet-rotate-card > div {
  padding: 0 1.2rem 1.2rem;
  border-top: 1px solid var(--line);
}
.wallet-rotate-card > div > p {
  color: #597095;
  font-size: var(--text-sm);
}
.wallet-setup-card fieldset {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.wallet-setup-card legend {
  padding: 0 0.35rem;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 750;
}
.wallet-security-card,
.wallet-how-card,
.wallet-recovery-guide {
  padding: 1.1rem;
}
.wallet-security-card > p,
.wallet-recovery-guide p {
  margin: 0.3rem 0 0.8rem;
  color: #5d7293;
  font-size: var(--text-sm);
}
.wallet-check {
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  margin-right: 0.3rem;
  border-radius: 50%;
  color: #fff;
  background: #20965a;
  font-size: 0.7rem;
}
.wallet-security-card .ui-stat-row {
  font-size: var(--text-sm);
}
.wallet-how-card ol {
  display: grid;
  gap: 0.9rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.wallet-how-card li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.65rem;
}
.wallet-how-card li > span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  color: #1469dc;
  background: #eaf3ff;
  font-size: var(--text-xs);
  font-weight: 800;
}
.wallet-how-card strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
}
.wallet-how-card p {
  margin: 0.1rem 0 0;
  color: #667999;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.wallet-admin-card {
  max-width: 48rem;
  margin: 1rem auto;
}
.wallet-noscript {
  max-width: none;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e5bab4;
  color: #743b33;
  background: #fff8f7;
}
@media (max-width: 899px) {
  .wallet-layout {
    grid-template-columns: 1fr;
  }
  .wallet-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wallet-recovery-guide {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .page-wallet main {
    width: min(100% - 1.5rem, 760px);
  }
  .wallet-hero {
    display: block;
    min-height: 0;
    padding: 1.35rem 1.15rem 0;
  }
  .wallet-hero-copy {
    padding-bottom: 0;
  }
  .wallet-hero h2 {
    font-size: 2.55rem;
  }
  .wallet-hero-art {
    height: 7rem;
    margin-top: 0.25rem;
  }
  .wallet-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .wallet-facts > section {
    min-height: 4.8rem;
    padding: 0.6rem;
  }
  .wallet-fact-icon {
    flex-basis: 2rem;
    width: 2rem;
    height: 2rem;
  }
  .wallet-key-card,
  .wallet-recovery-card,
  .wallet-restore-card,
  .wallet-setup-card,
  .wallet-admin-card {
    padding: 1rem;
  }
  .wallet-key-details,
  .wallet-password-grid,
  .wallet-sidebar {
    grid-template-columns: 1fr;
  }
  .wallet-key-details div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .wallet-inline-form {
    display: block;
  }
  .wallet-inline-form button {
    width: 100%;
    margin-top: 0.65rem;
  }
  .wallet-page [data-mnemonic-words] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wallet-recovery-guide {
    grid-column: auto;
  }
}

/* Account: operational settings backed only by implemented server actions. */
.page-account main {
  width: min(1280px, calc(100% - 3rem));
  padding-top: 0;
}
.account-page {
  padding-bottom: 3rem;
}
.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.62fr);
  align-items: end;
  min-height: 10.8rem;
  padding: 1.55rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fbff 5%, #edf5ff 100%);
}
.account-hero-copy {
  padding-bottom: 1.2rem;
}
.account-hero h2 {
  margin: 0.1rem 0 0.35rem;
  font-size: clamp(2.35rem, 5vw, 3.4rem);
  letter-spacing: -0.058em;
}
.account-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.account-hero p {
  margin: 0;
  color: #566b90;
  font-size: var(--text-md);
}
.account-hero-art {
  align-self: stretch;
  overflow: hidden;
}
.account-hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 8.7rem;
}
.account-tabs {
  display: flex;
  overflow-x: auto;
  gap: 0.15rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.account-tabs a {
  flex: 0 0 auto;
  padding: 0.78rem 1rem 0.68rem;
  border-bottom: 3px solid transparent;
  color: #516783;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.account-tabs a:hover,
.account-tabs a.is-active {
  border-bottom-color: #1673ef;
  color: #135cc1;
  background: #f8fbff;
}
.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 1rem;
  align-items: start;
}
.account-main,
.account-sidebar {
  display: grid;
  gap: 1rem;
}
.account-sidebar {
  position: sticky;
  top: 1rem;
}
.account-page .ui-card {
  border-radius: 8px;
  box-shadow: none;
}
.account-identity-card,
.account-password-card,
.account-sessions-card,
.account-data-card,
.account-security-status,
.account-guidance-card,
.account-danger-card {
  padding: 1.2rem;
}
.account-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.account-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.account-section-heading .ui-eyebrow {
  margin: 0 0 0.2rem;
}
.account-section-heading .ui-section-heading {
  margin: 0;
}
.account-section-heading .button {
  flex: 0 0 auto;
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  font-size: var(--text-xs);
}
.account-identity-card > p,
.account-password-card > p,
.account-sessions-card > p,
.account-data-card > p {
  max-width: 76ch;
  margin: 0.6rem 0 0.85rem;
  color: #587096;
}
.account-identity-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.account-identity-details div {
  min-width: 0;
  padding: 0.72rem 0.8rem;
}
.account-identity-details div:nth-child(2) {
  border-left: 1px solid var(--line);
}
.account-identity-details div:last-child {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
}
.account-identity-details dt {
  margin-bottom: 0.15rem;
  color: #65789b;
  font-size: var(--text-xs);
}
.account-identity-details dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.account-email-status,
.account-session-count {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  color: #7b571d;
  background: #fff1d9;
  font-size: var(--text-xs);
  font-weight: 750;
}
.account-email-status.is-verified,
.account-session-count {
  color: #1f7043;
  background: #e4f7ea;
}
.account-security-mark {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.1rem;
  font-weight: 800;
}
.account-page form {
  max-width: none;
  margin: 0.85rem 0 0;
}
.account-password-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.account-password-fields p {
  min-width: 0;
  margin: 0;
}
.account-password-fields input {
  width: 100%;
}
.account-password-fields small {
  display: block;
  margin-top: 0.25rem;
  color: #6c7f9f;
  font-size: var(--text-xs);
}
.account-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.95rem;
}
.account-form-actions button {
  min-height: 2.4rem;
}
.account-form-actions span {
  color: #637797;
  font-size: var(--text-xs);
}
.account-sessions-card form,
.account-data-card .button {
  margin-top: 0.2rem;
}
.account-data-card .button {
  display: inline-flex;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  font-size: var(--text-sm);
}
.account-security-status > p,
.account-danger-card > p {
  margin: 0.35rem 0 0.85rem;
  color: #5c7192;
  font-size: var(--text-sm);
}
.account-check {
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  margin-right: 0.3rem;
  border-radius: 50%;
  color: #fff;
  background: #20965a;
  font-size: 0.7rem;
}
.account-check.is-muted {
  color: #fff;
  background: #93a4be;
}
.account-security-status .ui-stat-row {
  font-size: var(--text-sm);
}
.account-guidance-card ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}
.account-guidance-card li {
  position: relative;
  padding-left: 1.2rem;
  color: #5d7394;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.account-guidance-card li::before {
  position: absolute;
  left: 0;
  color: #20965a;
  content: '✓';
  font-weight: 800;
}
.account-danger-card {
  border-color: #efc8c3 !important;
  background: #fffafa;
}
.account-danger-card .ui-eyebrow {
  color: #a94236;
}
.account-danger-card > p {
  color: #775c59;
}
.account-danger-card form p {
  margin: 0.8rem 0;
}
.account-danger-card input {
  width: 100%;
}
.account-danger-card button {
  width: 100%;
  min-height: 2.45rem;
  border-color: #a93d31;
  background: #a93d31;
  font-size: var(--text-sm);
}
.account-danger-card button:hover {
  background: #8b2d23;
}
@media (max-width: 899px) {
  .account-layout {
    grid-template-columns: 1fr;
  }
  .account-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-danger-card {
    grid-column: 1 / -1;
  }
}
@media (max-width: 699px) {
  .page-account main {
    width: min(100% - 1.5rem, 760px);
  }
  .account-hero {
    display: block;
    min-height: 0;
    padding: 1.35rem 1.15rem 0;
  }
  .account-hero-copy {
    padding-bottom: 0;
  }
  .account-hero h2 {
    font-size: 2.45rem;
  }
  .account-hero-art {
    height: 6.8rem;
    margin-top: 0.25rem;
  }
  .account-tabs {
    margin-bottom: 0.75rem;
  }
  .account-tabs a {
    padding-inline: 0.75rem;
  }
  .account-identity-card,
  .account-password-card,
  .account-sessions-card,
  .account-data-card,
  .account-security-status,
  .account-guidance-card,
  .account-danger-card {
    padding: 1rem;
  }
  .account-section-heading {
    display: block;
  }
  .account-section-heading .button {
    margin-top: 0.65rem;
  }
  .account-identity-details,
  .account-password-fields,
  .account-sidebar {
    grid-template-columns: 1fr;
  }
  .account-identity-details div:nth-child(2) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .account-danger-card {
    grid-column: auto;
  }
}

/* Notifications: a factual activity feed with no invented delivery preferences. */
.page-notifications main {
  width: min(1280px, calc(100% - 3rem));
  padding-top: 0;
}
.notifications-page {
  padding-bottom: 3rem;
}
.notifications-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.62fr);
  align-items: end;
  min-height: 10.8rem;
  padding: 1.55rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fbff 5%, #edf5ff 100%);
}
.notifications-hero-copy {
  padding-bottom: 1.2rem;
}
.notifications-hero h2 {
  margin: 0.1rem 0 0.35rem;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  letter-spacing: -0.058em;
}
.notifications-hero p {
  margin: 0;
  color: #566b90;
  font-size: var(--text-md);
}
.notifications-hero-art {
  align-self: stretch;
  overflow: hidden;
}
.notifications-hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 8.7rem;
}
.notifications-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
}
.notifications-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.notifications-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #536987;
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}
.notifications-tabs span.is-active {
  border-color: #f5d6b7;
  color: #cf6108;
  background: var(--orange-soft);
}
.notifications-tabs b {
  display: inline-grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: 999px;
  color: #135ec7;
  background: #eaf3ff;
  font-size: var(--text-xs);
}
.notifications-toolbar form {
  margin: 0;
}
.notifications-toolbar .button {
  min-height: 2.3rem;
  padding: 0.42rem 0.75rem;
  font-size: var(--text-sm);
}
.notifications-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 1rem;
  align-items: start;
}
.notifications-sidebar {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}
.notifications-page .ui-card {
  border-radius: 8px;
  box-shadow: none;
}
.notifications-feed {
  padding: 1.15rem 1.25rem;
}
.notifications-feed-heading,
.notifications-side-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.notifications-feed-heading .ui-eyebrow {
  margin: 0 0 0.2rem;
}
.notifications-feed-heading .ui-section-heading,
.notifications-side-heading .ui-section-heading {
  margin: 0;
}
.notifications-feed-heading > span,
.notifications-side-heading > span {
  flex: 0 0 auto;
  color: #667b9b;
  font-size: var(--text-xs);
  font-weight: 700;
}
.notifications-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notifications-list li {
  display: grid;
  grid-template-columns: 0.7rem 2.55rem minmax(0, 1fr) auto 0.8rem;
  align-items: center;
  gap: 0.7rem;
  min-height: 4.85rem;
  border-bottom: 1px solid #e5ecf6;
}
.notification-unread-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #1975ee;
}
.notifications-list li.is-read .notification-unread-dot {
  opacity: 0;
}
.notification-type-icon {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}
.notification-type-icon.is-escrow {
  color: #e26a00;
  background: var(--orange-soft);
}
.notification-type-icon.is-proposals {
  color: #176ee5;
  background: #eaf3ff;
}
.notification-type-icon.is-messages {
  color: #7045d8;
  background: #f0ebff;
}
.notification-type-icon.is-system {
  color: #607490;
  background: #eef2f7;
}
.notification-type-icon.is-gigs {
  color: #208252;
  background: #e8f7ee;
}
.notifications-list a {
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.notifications-list a strong,
.notifications-list a span {
  display: block;
}
.notifications-list a strong {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}
.notifications-list a span {
  margin-top: 0.12rem;
  overflow-wrap: anywhere;
  color: #667b9c;
  font-size: var(--text-xs);
}
.notifications-list li.is-read a strong {
  color: #445a7c;
  font-weight: 650;
}
.notifications-list li:hover a strong {
  color: #1469dc;
}
.notifications-list time {
  color: #647898;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.notification-chevron {
  color: #526a8e;
  font-size: 1.45rem;
  line-height: 1;
}
.notifications-empty {
  display: grid;
  place-items: center;
  min-height: 18rem;
  padding: 2rem;
  text-align: center;
}
.notifications-empty > span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  margin-bottom: 0.65rem;
  border-radius: 50%;
  color: #25824e;
  background: #e5f7eb;
  font-size: 1.4rem;
  font-weight: 800;
}
.notifications-empty h4 {
  margin: 0;
  font-size: var(--text-md);
}
.notifications-empty p {
  margin: 0.35rem 0 0;
  color: #607495;
  font-size: var(--text-sm);
}
.notifications-summary,
.notifications-policy {
  padding: 1.1rem;
}
.notifications-summary-list {
  margin-top: 0.4rem;
}
.notifications-summary-list > div {
  display: grid;
  grid-template-columns: 2.05rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  border-bottom: 1px solid #e6edf6;
}
.notifications-summary-list > div:last-child {
  border-bottom: 0;
}
.notifications-summary-list .notification-type-icon {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.9rem;
}
.notifications-summary-list strong {
  color: #4a607f;
  font-size: var(--text-sm);
  font-weight: 650;
}
.notifications-summary-list b {
  display: grid;
  min-width: 1.55rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  color: #396283;
  background: #f0f5fb;
  font-size: var(--text-xs);
}
.notifications-policy p {
  margin: 0.45rem 0 0.75rem;
  color: #5f7495;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.notifications-policy a {
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}
@media (max-width: 899px) {
  .notifications-layout {
    grid-template-columns: 1fr;
  }
  .notifications-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  .page-notifications main {
    width: min(100% - 1.5rem, 760px);
  }
  .notifications-hero {
    display: block;
    min-height: 0;
    padding: 1.35rem 1.15rem 0;
  }
  .notifications-hero-copy {
    padding-bottom: 0;
  }
  .notifications-hero h2 {
    font-size: 2.55rem;
  }
  .notifications-hero-art {
    height: 6.8rem;
    margin-top: 0.25rem;
  }
  .notifications-toolbar {
    display: block;
    padding: 0.6rem;
  }
  .notifications-toolbar form {
    margin-top: 0.55rem;
  }
  .notifications-toolbar .button {
    width: 100%;
  }
  .notifications-feed {
    padding: 1rem;
  }
  .notifications-list li {
    grid-template-columns: 0.5rem 2.25rem minmax(0, 1fr) 0.65rem;
    gap: 0.55rem;
    min-height: 5.55rem;
  }
  .notifications-list time {
    grid-column: 3 / 4;
    margin-top: -0.65rem;
  }
  .notification-chevron {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
  .notifications-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Public auth: only the credentials and flows implemented by GigBiz. */
.page-register main,
.page-login main {
  width: min(1120px, calc(100% - 3rem));
  padding-top: 0;
}
.auth-page {
  padding-bottom: 3rem;
}
.auth-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
  align-items: end;
  min-height: 13rem;
  padding: 1.6rem 1.65rem 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fbff 5%, #edf5ff 100%);
}
.auth-hero-copy {
  padding-bottom: 1.3rem;
}
.auth-hero h2 {
  margin: 0.1rem 0 0.35rem;
  font-size: clamp(2.65rem, 6vw, 4rem);
  letter-spacing: -0.065em;
}
.auth-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.auth-hero p:not(.ui-eyebrow) {
  margin: 0;
  color: #566b90;
  font-size: var(--text-lg);
}
.auth-hero-art {
  align-self: stretch;
  overflow: hidden;
}
.auth-hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 11rem;
}
.auth-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  margin-top: 1rem;
}
.auth-points span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #314d76;
  font-size: var(--text-sm);
  font-weight: 750;
}
.auth-points b {
  color: #176ee5;
  font-size: var(--text-lg);
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.72fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.auth-page .ui-card {
  border-radius: 8px;
  box-shadow: none;
}
.auth-form-card {
  padding: 1.45rem;
}
.auth-form-heading .ui-eyebrow {
  margin: 0 0 0.2rem;
}
.auth-form-heading .ui-section-heading {
  margin: 0;
  font-size: var(--text-xl);
}
.auth-form-heading > p:not(.ui-eyebrow) {
  margin: 0.3rem 0 1rem;
  color: #5a7092;
}
.auth-form-card form {
  max-width: none;
  margin: 0;
}
.auth-form-card form > p {
  max-width: none;
  margin: 0 0 0.85rem;
}
.auth-form-card input {
  width: 100%;
  min-height: 2.65rem;
}
.auth-form-card small {
  display: block;
  margin-top: 0.25rem;
  color: #6b7f9f;
  font-size: var(--text-xs);
}
.auth-form-card button {
  width: 100%;
  min-height: 2.8rem;
  margin-top: 0.15rem;
  font-size: var(--text-sm);
}
.auth-forgot {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.25rem !important;
}
.auth-forgot a {
  font-size: var(--text-sm);
  font-weight: 700;
}
.auth-switch {
  max-width: none;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: #617596;
  text-align: center;
  font-size: var(--text-sm);
}
.auth-switch a {
  font-weight: 750;
  text-decoration: none;
}
.auth-sidebar {
  display: grid;
  gap: 1rem;
}
.auth-principles,
.auth-security-note {
  padding: 1.25rem;
}
.auth-principles .ui-section-heading,
.auth-security-note .ui-section-heading {
  margin: 0;
}
.auth-principles ul {
  display: grid;
  gap: 1.1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.auth-principles li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.7rem;
}
.auth-principles li > span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.15rem;
  font-weight: 800;
}
.auth-principles li:first-child > span {
  color: #e26a00;
  background: var(--orange-soft);
}
.auth-principles strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
}
.auth-principles p {
  margin: 0.15rem 0 0;
  color: #607595;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.auth-security-note {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: 0.7rem;
  background: #fbfdff;
}
.auth-security-note > span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.2rem;
  font-weight: 800;
}
.auth-security-note p {
  margin: 0.3rem 0 0;
  color: #5e7394;
  font-size: var(--text-sm);
  line-height: 1.4;
}
@media (max-width: 799px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  .page-register main,
  .page-login main {
    width: min(100% - 1.5rem, 760px);
  }
  .auth-hero {
    display: block;
    min-height: 0;
    padding: 1.35rem 1.15rem 0;
  }
  .auth-hero-copy {
    padding-bottom: 0;
  }
  .auth-hero h2 {
    font-size: 2.6rem;
  }
  .auth-hero-art {
    height: 8.1rem;
    margin-top: 0.25rem;
  }
  .auth-points {
    gap: 0.25rem 0.8rem;
  }
  .auth-points span {
    font-size: var(--text-xs);
  }
  .auth-form-card {
    padding: 1.05rem;
  }
  .auth-sidebar {
    grid-template-columns: 1fr;
  }
  .auth-principles,
  .auth-security-note {
    padding: 1rem;
  }
}

/* Password recovery and confirmation: same large editorial composition as the public entry pages. */
.page-forgotPassword main,
.page-resetPassword main,
.page-message main {
  width: min(1120px, calc(100% - 3rem));
  padding-top: 0;
}
.recovery-page {
  padding-bottom: 3rem;
}
.recovery-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 0.68fr);
  align-items: end;
  min-height: 17.7rem;
  padding: 1.7rem 1.65rem 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fbff 5%, #edf5ff 100%);
}
.recovery-hero-copy {
  padding-bottom: 3.2rem;
}
.recovery-hero h2 {
  max-width: 10ch;
  margin: 0.1rem 0 0.4rem;
  font-size: clamp(2.9rem, 6vw, 4.15rem);
  letter-spacing: -0.068em;
}
.recovery-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.recovery-hero p:not(.ui-eyebrow) {
  max-width: 34rem;
  margin: 0;
  color: #566b90;
  font-size: var(--text-xl);
  line-height: 1.25;
}
.recovery-hero-art {
  align-self: stretch;
  overflow: hidden;
}
.recovery-hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
}
.recovery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, 0.88fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.recovery-page .ui-card {
  border-radius: 8px;
  box-shadow: none;
}
.recovery-main-card {
  min-height: 39rem;
  padding: 1.7rem 2.05rem;
}
.recovery-forgot-card {
  text-align: center;
}
.recovery-symbol {
  display: grid;
  width: 5.1rem;
  height: 5.1rem;
  place-items: center;
  margin: 1rem auto 1.05rem;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 2.25rem;
  font-weight: 800;
}
.recovery-symbol.is-success {
  color: #238d4b;
  background: #e5f8eb;
}
.recovery-forgot-card .ui-section-heading {
  margin: 0;
  font-size: var(--text-2xl);
}
.recovery-forgot-card > p {
  max-width: 38rem;
  margin: 0.35rem auto 1.45rem;
  color: #5d7294;
  font-size: var(--text-md);
}
.recovery-forgot-card form {
  max-width: 37rem;
  margin: 0 auto;
  text-align: left;
}
.recovery-page form p {
  max-width: none;
}
.recovery-page input {
  width: 100%;
  min-height: 2.75rem;
}
.recovery-page form button {
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.1rem;
  font-size: var(--text-sm);
}
.recovery-info-note,
.recovery-expiry-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 37rem;
  margin: 1rem auto 0;
  padding: 0.72rem 0.8rem;
  border: 1px solid #cfe0fa;
  border-radius: 6px;
  color: #536f99;
  background: #f4f9ff;
  text-align: left;
}
.recovery-info-note > span,
.recovery-expiry-note > span {
  display: grid;
  flex: 0 0 1.3rem;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border: 2px solid #176ee5;
  border-radius: 50%;
  color: #176ee5;
  font-size: var(--text-xs);
  font-weight: 800;
}
.recovery-expiry-note {
  max-width: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.recovery-expiry-note > span {
  border: 0;
  color: #647899;
  font-size: 1.2rem;
}
.recovery-info-note p,
.recovery-expiry-note p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.recovery-back {
  max-width: 37rem;
  margin: 1.6rem auto 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.recovery-back a {
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}
.recovery-sidebar {
  display: grid;
  gap: 1rem;
}
.recovery-steps-card,
.recovery-safe-card {
  padding: 1.35rem;
}
.recovery-steps-card .ui-section-heading {
  margin: 0;
  font-size: var(--text-xl);
}
.recovery-steps-card > p {
  margin: 0.3rem 0 1rem;
  color: #637899;
  font-size: var(--text-sm);
}
.recovery-steps-card ol {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.recovery-steps-card li {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: 0.8rem;
}
.recovery-steps-card li > span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: var(--text-sm);
  font-weight: 800;
}
.recovery-steps-card li strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-sm);
}
.recovery-steps-card li p {
  margin: 0.15rem 0 0;
  color: #617697;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.recovery-safe-card {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 0.7rem;
  background: #fbfdff;
}
.recovery-safe-card > span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.25rem;
  font-weight: 800;
}
.recovery-safe-card .ui-section-heading {
  margin: 0;
  font-size: var(--text-md);
}
.recovery-safe-card p {
  margin: 0.25rem 0 0;
  color: #5f7496;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.recovery-reset-card {
  min-height: 36rem;
  padding: 1.55rem 1.75rem;
}
.recovery-form-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}
.recovery-form-title .recovery-symbol {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  font-size: 1.25rem;
}
.recovery-form-title .ui-section-heading {
  margin: 0;
  font-size: var(--text-xl);
}
.recovery-form-title p {
  margin: 0.2rem 0 0;
  color: #607595;
}
.recovery-reset-card form {
  max-width: none;
  margin: 0;
}
.recovery-reset-card form p {
  margin-bottom: 1rem;
}
.recovery-reset-card form small {
  display: block;
  margin-top: 0.3rem;
  color: #6b7f9f;
  font-size: var(--text-xs);
}
.recovery-reset-card .recovery-back {
  max-width: none;
  margin-top: 0.25rem;
}
.recovery-confirm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 35rem;
  text-align: center;
}
.recovery-confirm-card .recovery-symbol {
  margin-top: 0;
}
.recovery-confirm-card .ui-section-heading {
  margin: 0;
  font-size: var(--text-2xl);
}
.recovery-confirm-card > p {
  max-width: 35rem;
  margin: 0.55rem auto 1.2rem;
  color: #5d7294;
  font-size: var(--text-md);
}
.recovery-confirm-card > .button {
  width: min(100%, 27rem);
  min-height: 2.75rem;
  margin-top: 0.55rem;
}
.recovery-confirm-card .button-secondary {
  margin-top: 0.55rem;
}
.recovery-confirm-footer {
  width: 100%;
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.recovery-confirm-footer strong,
.recovery-confirm-footer span {
  display: block;
}
.recovery-confirm-footer strong {
  color: var(--ink);
  font-size: var(--text-sm);
}
.recovery-confirm-footer span {
  margin-top: 0.2rem;
  color: #657a9a;
  font-size: var(--text-xs);
}
@media (max-width: 799px) {
  .recovery-layout {
    grid-template-columns: 1fr;
  }
  .recovery-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recovery-main-card {
    min-height: 0;
  }
}
@media (max-width: 699px) {
  .page-forgotPassword main,
  .page-resetPassword main,
  .page-message main {
    width: min(100% - 1.5rem, 760px);
  }
  .recovery-hero {
    display: block;
    min-height: 0;
    padding: 1.35rem 1.15rem 0;
  }
  .recovery-hero-copy {
    padding-bottom: 0;
  }
  .recovery-hero h2 {
    font-size: 2.7rem;
  }
  .recovery-hero p:not(.ui-eyebrow) {
    font-size: var(--text-md);
  }
  .recovery-hero-art {
    height: 8.6rem;
    margin-top: 0.25rem;
  }
  .recovery-main-card,
  .recovery-steps-card,
  .recovery-safe-card {
    padding: 1.1rem;
  }
  .recovery-symbol {
    width: 4rem;
    height: 4rem;
    margin-top: 0;
    font-size: 1.8rem;
  }
  .recovery-sidebar {
    grid-template-columns: 1fr;
  }
  .recovery-confirm-card {
    min-height: 27rem;
  }
}

/* Provided illustration assets. */
.market-art > img,
.wallet-hero-art > img,
.notifications-hero-art > img,
.account-hero-art > img,
.auth-hero-art > img,
.recovery-hero-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.market-art > img {
  position: absolute;
  inset: 0;
}
.wallet-hero-art > img,
.notifications-hero-art > img,
.account-hero-art > img,
.auth-hero-art > img,
.recovery-hero-art > img {
  min-height: inherit;
}
.account-hero-art {
  align-self: stretch;
  overflow: hidden;
}
.account-hero-art svg {
  display: none;
}
@media (max-width: 699px) {
  .market-art > img {
    object-position: center center;
  }
  .wallet-hero-art > img,
  .notifications-hero-art > img,
  .account-hero-art > img,
  .auth-hero-art > img,
  .recovery-hero-art > img {
    object-position: center 58%;
  }
}

.post-gig-art > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center 58%;
}
.wallet-setup-card {
  position: relative;
  overflow: hidden;
}
.wallet-setup-card > :not(.wallet-setup-illustration) {
  position: relative;
  z-index: 1;
}
.wallet-setup-illustration {
  position: absolute;
  top: -3.6rem;
  right: -2.4rem;
  width: 12.5rem;
  opacity: 0.17;
  pointer-events: none;
}
.account-identity-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.4rem;
  align-items: center;
  gap: 0.75rem;
}
.account-identity-intro p {
  margin: 0.6rem 0 0.85rem;
}
.account-identity-intro img {
  width: 7rem;
  height: 5rem;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  opacity: 0.85;
}
.thread-empty {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: none;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #5f7494;
  background: #fbfdff;
  font-size: var(--text-sm);
}
.thread-empty img {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 699px) {
  .wallet-setup-illustration {
    width: 9rem;
    top: -2rem;
    right: -1.75rem;
  }
  .account-identity-intro {
    grid-template-columns: 1fr;
  }
  .account-identity-intro img {
    display: none;
  }
  .thread-empty {
    align-items: flex-start;
  }
}

/* Page heroes, aligned with the design mock: headline on the left, the illustration
   blended into the page background on the right (no boxed panel), cards below. */
.market-hero,
.auth-hero,
.recovery-hero,
.wallet-hero,
.account-hero,
.notifications-hero,
.post-gig-hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
  align-items: center;
  min-height: 16rem;
  margin: 0;
  padding: 0.5rem 0 0;
  border-bottom: 0;
  background: transparent;
}
.market-hero-copy,
.auth-hero-copy,
.recovery-hero-copy,
.wallet-hero-copy,
.account-hero-copy,
.notifications-hero-copy,
.post-gig-hero > div:first-child {
  padding: 1.25rem 0 1.5rem;
}
:is(
    .market-hero,
    .auth-hero,
    .recovery-hero,
    .wallet-hero,
    .account-hero,
    .notifications-hero,
    .post-gig-hero,
    .browse-hero
  )
  h2 {
  max-width: none;
  color: #081735;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
:is(
    .market-hero,
    .auth-hero,
    .recovery-hero,
    .wallet-hero,
    .account-hero,
    .notifications-hero,
    .post-gig-hero
  )
  h2
  em {
  color: var(--orange);
  font-style: normal;
}
.market-art,
.auth-hero-art,
.recovery-hero-art,
.wallet-hero-art,
.account-hero-art,
.notifications-hero-art,
.post-gig-art {
  position: relative;
  align-self: end;
  height: 17rem;
  min-height: 0;
  overflow: visible;
  background: transparent;
}
:is(
    .market-art,
    .auth-hero-art,
    .recovery-hero-art,
    .wallet-hero-art,
    .account-hero-art,
    .notifications-hero-art,
    .post-gig-art
  )
  > img {
  position: absolute;
  inset: auto 0 0 auto;
  width: auto;
  height: 118%;
  min-height: 0;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.market-art {
  height: 20rem;
}
@media (max-width: 699px) {
  .market-hero,
  .auth-hero,
  .recovery-hero,
  .wallet-hero,
  .account-hero,
  .notifications-hero,
  .post-gig-hero {
    display: block;
    padding: 0.5rem 0 0;
  }
  .market-art,
  .auth-hero-art,
  .recovery-hero-art,
  .wallet-hero-art,
  .account-hero-art,
  .notifications-hero-art,
  .post-gig-art {
    height: 10rem;
  }
  :is(
      .market-art,
      .auth-hero-art,
      .recovery-hero-art,
      .wallet-hero-art,
      .account-hero-art,
      .notifications-hero-art,
      .post-gig-art
    )
    > img {
    inset: auto 0 0 0;
    width: 100%;
    height: 100%;
  }
}

/* Inline SVG icons (apps/web/icons.ts) take the size and colour of their text. */
.icon {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  stroke-width: 2;
}
.button .icon,
button .icon,
a .icon {
  width: 1em;
  height: 1em;
}
:is(
  .fact-icon,
  .wallet-fact-icon,
  .notification-type-icon,
  .recovery-symbol,
  .account-security-mark,
  .recovery-safe-card > span,
  .auth-security-note > span,
  .home-benefits li > span,
  .auth-principles li > span,
  .browse-facts li > span,
  .profile-rating > span,
  .recovery-info-note > span,
  .recovery-expiry-note > span,
  .notifications-empty > span
) {
  display: inline-grid;
  place-items: center;
}
:is(
    .fact-icon,
    .wallet-fact-icon,
    .home-benefits li > span,
    .auth-principles li > span,
    .browse-facts li > span,
    .recovery-safe-card > span,
    .auth-security-note > span
  )
  .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.recovery-symbol .icon {
  width: 2.2rem;
  height: 2.2rem;
}

/* One page width for header, content and footer, as in the design mock. */
:root {
  --page-width: 1220px;
}
body > header {
  padding: 0 max(1.1rem, calc((100vw - var(--page-width)) / 2));
}
@media (min-width: 700px) {
  body[class] main {
    width: min(var(--page-width), calc(100% - 3rem));
  }
}

/* Header navigation */
.nav-primary a {
  position: relative;
  color: #2b3a57;
  font-size: 0.9rem;
  font-weight: 600;
}
.nav-primary a:first-child {
  color: #2b3a57;
  font-weight: 600;
}
.nav-primary a[aria-current='page'] {
  color: #0b1635;
  font-weight: 800;
}
.nav-primary a[aria-current='page']::after {
  position: absolute;
  right: 0.78rem;
  bottom: 0;
  left: 0.78rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #1469dc;
  content: '';
}
body > header nav .nav-account a,
body > header nav .nav-account form button {
  gap: 0.4rem;
  font-size: 0.85rem;
}
body > header nav .nav-account .icon {
  width: 1.15rem;
  height: 1.15rem;
}
.nav-icon-link[aria-current='page'] {
  color: #1469dc;
}
.nav-badge:empty {
  display: none;
}
body > header .nav-badge:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
}
.nav-avatar > span[aria-hidden] {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #4aa3ff, #1469dc);
  font-size: 0.85rem;
  font-weight: 800;
}
.nav-logout .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav-login {
  align-self: center;
  min-height: 2.3rem !important;
  margin: 0.65rem 0.2rem 0.65rem 0.4rem;
  padding: 0.4rem 1rem !important;
  border: 1px solid var(--line-dark) !important;
  border-radius: 8px;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.nav-create {
  min-height: 2.3rem !important;
  margin-block: 0.65rem;
  padding: 0.4rem 1rem !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}
@media (min-width: 700px) and (max-width: 1100px) {
  body > header nav .nav-account .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  width: min(var(--page-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.1rem 0;
}
.footer-brand {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.footer-brand::after {
  color: #1673ef;
  content: '.space';
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.site-footer nav a {
  color: #40506d;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.site-footer nav a:hover {
  color: #1469dc;
}
.site-footer p {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
}
.site-footer p .icon {
  color: #1469dc;
}
@media (max-width: 699px) {
  .site-footer p {
    margin-left: 0;
  }
}

/* The hero art stays below the header. */
:is(
    .market-art,
    .auth-hero-art,
    .recovery-hero-art,
    .wallet-hero-art,
    .account-hero-art,
    .notifications-hero-art,
    .post-gig-art
  )
  > img {
  height: 100%;
}
.market-art,
.auth-hero-art,
.recovery-hero-art,
.wallet-hero-art,
.account-hero-art,
.notifications-hero-art,
.post-gig-art {
  height: 18.5rem;
}
.market-art {
  height: 21rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.button-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}
.button-ghost:hover {
  border-color: var(--line-dark);
  color: var(--ink);
  background: #f4f8ff;
}

/* Pills: payment rails and gig status */
.browse-rails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.rail-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.rail-pill.is-lightning {
  color: #9a4a00;
  background: #fff1e3;
}
.rail-pill.is-onchain {
  color: #1256b8;
  background: #e8f1ff;
}
.status-pill.is-open {
  color: #17753f;
  background: #e3f6ea;
}
.status-pill.is-progress {
  color: #1256b8;
  background: #e6f0ff;
}
.status-pill.is-waiting {
  color: #955300;
  background: #fff1dc;
}
.status-pill.is-done {
  color: #17753f;
  background: #e3f6ea;
}
.status-pill.is-danger {
  color: #b3261e;
  background: #fde8e6;
}
.status-pill.is-closed {
  color: #55627a;
  background: #eef1f6;
}
.browse-status time {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.browse-open .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* Find work promo: the mascot instead of the abstract mountains */
.browse-promo {
  position: relative;
  overflow: hidden;
}
.browse-promo > div {
  position: relative;
  z-index: 1;
  max-width: 62%;
}
.browse-promo-art {
  position: absolute;
  right: -0.5rem;
  bottom: -1.5rem;
  width: 46%;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.browse-hero .kicker:first-child,
.browse-promo .kicker {
  display: none;
}

/* My gigs dashboard */
.mygigs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: end;
  min-height: 11rem;
}
.mygigs-hero h2 {
  margin: 0 0 0.3rem;
  color: #081735;
  font-size: clamp(2.75rem, 4.3vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}
.mygigs-hero h2 em {
  color: var(--orange);
  font-style: normal;
}
.mygigs-hero p {
  margin: 0;
  color: #536887;
  font-size: var(--text-lg);
}
.mygigs-hero-copy {
  padding: 1.5rem 0 1.25rem;
}
.mygigs-hero-art {
  position: relative;
  height: 12rem;
}
.mygigs-hero-art img {
  position: absolute;
  right: 0;
  bottom: -2.5rem;
  height: 15rem;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}
.mygigs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18.5rem;
  gap: 1.1rem;
  align-items: start;
}
.mygigs-main {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.mygigs-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mygigs-stats a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(16 35 74 / 4%);
}
.mygigs-stats a:hover {
  border-color: #b9d2f5;
}
.mygigs-stats a > .icon {
  color: #8a9ab5;
}
.mygigs-stats small {
  display: block;
  color: #2b3a57;
  font-size: 0.85rem;
  font-weight: 700;
}
.mygigs-stats strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.mygigs-stats span > span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.stat-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
}
.stat-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}
.stat-icon.is-blue {
  color: #1469dc;
  background: #e8f1ff;
}
.stat-icon.is-orange {
  color: #e56b00;
  background: #fff0e2;
}
.stat-icon.is-purple {
  color: #7c3aed;
  background: #f1eafe;
}
.stat-icon.is-bitcoin {
  color: #fff;
  background: var(--orange);
  border-radius: 50%;
}
.mygigs-table-card {
  padding: 0.9rem 1rem 1rem;
}
.mygigs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.mygigs-tabs a {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #2b3a57;
  font-size: 0.87rem;
  font-weight: 650;
  text-decoration: none;
}
.mygigs-tabs a:hover {
  border-color: #b9d2f5;
}
.mygigs-tabs a[aria-current='page'] {
  border-color: #ffd2ad;
  color: #d45f00;
  background: var(--orange-soft);
  box-shadow: inset 0 -2px 0 var(--orange);
}
.mygigs-filters {
  display: grid;
  grid-template-columns: minmax(12rem, 1.4fr) repeat(3, minmax(8rem, 1fr)) auto;
  align-items: end;
  gap: 0.75rem;
  max-width: none;
  margin: 0.9rem 0;
}
.mygigs-filters label {
  gap: 0.3rem;
  color: #2b3a57;
  font-size: 0.82rem;
}
.mygigs-filters .button-secondary {
  min-height: 2.75rem;
}
.mygigs-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.mygigs-row {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) 0.8fr 1fr 1.1fr 1fr 0.9fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #fff;
}
.mygigs-row:first-child {
  border-top: 0;
}
.mygigs-head {
  padding-block: 0.6rem;
  color: #5c6d8e;
  background: #f7faff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mygigs-gig {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.mygigs-gig > span:last-child {
  min-width: 0;
}
.mygigs-gig a {
  display: block;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.mygigs-gig a:hover {
  color: #1469dc;
}
.mygigs-gig small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gig-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
}
.gig-glyph .icon {
  width: 1.3rem;
  height: 1.3rem;
}
.gig-glyph.is-client {
  color: #1469dc;
  background: #e8f1ff;
}
.gig-glyph.is-worker {
  color: #e56b00;
  background: #fff0e2;
}
.gig-glyph.is-applicant {
  color: #7c3aed;
  background: #f1eafe;
}
.mygigs-role {
  font-size: 0.87rem;
  font-weight: 650;
}
.mygigs-role small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}
.mygigs-reward strong {
  font-weight: 800;
  white-space: nowrap;
}
.mygigs-date {
  color: var(--muted);
  font-size: 0.85rem;
}
.mygigs-actions {
  display: flex;
  gap: 0.4rem;
}
.mygigs-actions .button {
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.84rem;
}
.mygigs-table-card .browse-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0.2rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.mygigs-sidebar {
  display: grid;
  gap: 1rem;
}
.quick-actions {
  display: grid;
  gap: 0.55rem;
  padding: 1.1rem;
}
.quick-actions h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}
.quick-actions h3 .icon {
  color: var(--orange);
  fill: var(--orange);
}
.quick-actions .button {
  min-height: 2.8rem;
}
.quick-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}
.quick-link > span {
  flex: 1;
}
.quick-link > .icon:first-child {
  color: #1469dc;
}
.quick-link > .icon:last-child {
  color: #8a9ab5;
}
.quick-link:hover {
  border-color: #b9d2f5;
  background: #f7faff;
}
.mygigs-note {
  display: flex;
  gap: 0.8rem;
  padding: 1.1rem;
}
.mygigs-note > span {
  color: #1469dc;
}
.mygigs-note > span .icon {
  width: 1.8rem;
  height: 1.8rem;
}
.mygigs-note h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}
.mygigs-note p {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.mygigs-note a {
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
}
@media (max-width: 1100px) {
  .mygigs-layout {
    grid-template-columns: 1fr;
  }
  .mygigs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mygigs-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  .mygigs-hero {
    display: block;
    min-height: 0;
  }
  .mygigs-hero-art {
    display: none;
  }
  .mygigs-stats {
    grid-template-columns: 1fr;
  }
  .mygigs-filters {
    grid-template-columns: 1fr 1fr;
  }
  .mygigs-search {
    grid-column: 1 / -1;
  }
  .mygigs-head {
    display: none;
  }
  .mygigs-row {
    grid-template-columns: 1fr auto;
  }
  .mygigs-gig {
    grid-column: 1 / -1;
  }
  .mygigs-row > .mygigs-role,
  .mygigs-row > .mygigs-date,
  .mygigs-row > .browse-rails {
    display: none;
  }
  .mygigs-actions {
    grid-column: 1 / -1;
  }
  .mygigs-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Mobile: a side gutter on every page, and a shorter hero illustration. */
@media (max-width: 699px) {
  body[class] main {
    width: calc(100% - 2rem);
  }
  .market-art,
  .auth-hero-art,
  .recovery-hero-art,
  .wallet-hero-art,
  .account-hero-art,
  .notifications-hero-art,
  .post-gig-art {
    height: 11rem;
  }
  .market-art {
    height: 13rem;
  }
}
main > section.mygigs-hero {
  margin: -1rem 0 0;
  padding: 0;
  border: 0;
}
.mygigs-row {
  grid-template-columns: minmax(0, 3fr) 0.75fr 0.95fr 1.05fr 0.85fr auto;
}
.mygigs-reward small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}
.mygigs-date {
  white-space: nowrap;
}
.browse-list-head,
.browse-list li {
  grid-template-columns:
    minmax(15rem, 2.8fr) minmax(9.5rem, 1fr) minmax(8.2rem, 1fr) minmax(5.5rem, 0.72fr)
    minmax(5.8rem, 0.72fr) 1rem;
}
.browse-status time {
  white-space: nowrap;
}

/* Gig detail, aligned with the mock */
.gig-summary {
  padding: 1.6rem 1.75rem 1.4rem;
  border-radius: 12px;
}
.gig-summary h2 {
  font-weight: 900;
  letter-spacing: -0.035em;
}
.gig-back {
  align-items: center;
  gap: 0.35rem;
}
.gig-lede {
  margin: 0.55rem 0 0;
  color: #536887;
  font-size: var(--text-md);
}
.gig-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 0;
  margin: 1.3rem 0 0;
  padding: 1.1rem 0 1.2rem;
  border-block: 1px solid var(--line);
  list-style: none;
}
.gig-meta > li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--line);
}
.gig-meta > li:first-child {
  padding-left: 0;
  border-left: 0;
}
.gig-meta > li > .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #5c6d8e;
}
.gig-meta strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}
.gig-meta small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.gig-meta-reward strong {
  font-size: 1.45rem;
  font-weight: 900;
}
.gig-meta-coin {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
}
.gig-meta-coin .icon {
  width: 1.4rem;
  height: 1.4rem;
}
.gig-timeline li.is-current {
  border-color: var(--line-dark);
}
.gig-main > .ui-card.gig-section {
  margin-top: 1rem;
  padding: 1.35rem 1.6rem;
  border-radius: 12px;
}
.gig-main > .ui-card.gig-section > h3:first-child {
  margin-top: 0;
}
.gig-applications li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  border-radius: 10px;
}
.proposal-avatar {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #4aa3ff, #1469dc);
  font-size: 1.2rem;
  font-weight: 900;
}
.proposal-body p {
  max-width: none;
  margin: 0;
}
.proposal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.proposal-head a {
  color: var(--ink);
  font-size: 1.05rem;
  text-decoration: none;
}
.proposal-head a:hover {
  color: #1469dc;
}
.proposal-stats {
  color: var(--muted);
  font-size: 0.82rem;
}
.proposal-message {
  margin-top: 0.45rem !important;
  color: #2b3a57;
  font-size: 0.92rem;
}
.proposal-actions {
  display: grid;
  gap: 0.45rem;
  justify-items: stretch;
  min-width: 11rem;
}
.proposal-actions form {
  margin: 0;
}
.gig-applications .proposal-actions form button {
  width: 100%;
  border-color: var(--orange);
  border-radius: 8px;
  background: var(--orange);
}
.proposal-actions .button {
  font-size: var(--text-sm);
}
.gig-empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
}
.gig-apply-login {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.gig-history ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gig-history li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.gig-history li:first-child {
  border-top: 0;
}
.gig-history time {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.history-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #1469dc;
}
.action-area {
  border-radius: 12px;
}
@media (max-width: 699px) {
  .gig-meta > li {
    padding: 0 0.9rem 0 0;
    border-left: 0;
  }
  .gig-applications li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .proposal-actions {
    grid-column: 1 / -1;
  }
  .gig-history li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .gig-history time {
    grid-column: 2;
  }
}
.gig-meta > li {
  padding: 0 0.95rem;
}
.gig-meta-reward strong {
  font-size: 1.3rem;
}
.action-area:not(:has(> :not(h3))) {
  display: none;
}
.action-area {
  border-top: 1px solid #dce6f4 !important;
}

/* Footer at the bottom of short pages */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main {
  flex: 1 0 auto;
}
body > header,
body > .site-footer {
  flex: none;
}

/* Edit gig: same edges as the other pages */
.edit-gig-page > .gig-back {
  margin-left: 0;
}
.edit-gig-header {
  padding: 0.5rem 0 1.2rem;
}
.edit-gig-header h2 {
  font-weight: 900;
  letter-spacing: -0.035em;
}
.edit-gig-layout {
  padding: 0;
}
.recovery-symbol .icon {
  width: 2rem;
  height: 2rem;
}

/* Hero illustrations (WebP, apps/web/illustrations.ts): the slot takes the crop's ratio,
   16:9 desktop, 4:3 tablet, 2:1 phone, and the scene's edges fade into the page. */
.market-art,
.auth-hero-art,
.recovery-hero-art,
.wallet-hero-art,
.account-hero-art,
.notifications-hero-art,
.post-gig-art,
.mygigs-hero-art {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  align-self: center;
  overflow: hidden;
}
:is(
    .market-art,
    .auth-hero-art,
    .recovery-hero-art,
    .wallet-hero-art,
    .account-hero-art,
    .notifications-hero-art,
    .post-gig-art,
    .mygigs-hero-art
  )
  picture {
  display: block;
  width: 100%;
  height: 100%;
}
:is(
    .market-art,
    .auth-hero-art,
    .recovery-hero-art,
    .wallet-hero-art,
    .account-hero-art,
    .notifications-hero-art,
    .post-gig-art,
    .mygigs-hero-art
  )
  img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: normal;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 16%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 16%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.mygigs-hero {
  grid-template-columns: minmax(0, 1fr) 24rem;
  align-items: center;
}
.mygigs-hero-art {
  height: auto;
}
@media (max-width: 1099px) {
  .market-art,
  .auth-hero-art,
  .recovery-hero-art,
  .wallet-hero-art,
  .account-hero-art,
  .notifications-hero-art,
  .post-gig-art,
  .mygigs-hero-art {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 699px) {
  .market-art,
  .auth-hero-art,
  .recovery-hero-art,
  .wallet-hero-art,
  .account-hero-art,
  .notifications-hero-art,
  .post-gig-art {
    aspect-ratio: 2 / 1;
    height: auto;
    margin-top: 0.5rem;
  }
}

/* Small illustrations cut from the same scenes */
.browse-promo-art {
  top: 50%;
  bottom: auto;
  right: 0;
  width: 44%;
  height: auto;
  transform: translateY(-50%);
  mix-blend-mode: normal;
}
.wallet-setup-illustration {
  mix-blend-mode: normal;
  border-radius: 50%;
}
.account-identity-intro img {
  width: 7rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 8px;
  opacity: 1;
}

/* Home: sections share the header's edges instead of bleeding past them. */
.page-home main > :is(.hero-facts, .market-latest, .home-workflow, .home-benefits) {
  margin-inline: 0;
}
.market-rail.browse-rails {
  padding: 0;
  border: 0;
  background: none;
}

/* Home marketplace reference: scoped to preserve operational-page layouts. */
.page-home main {
  width: min(var(--page-width), calc(100% - 3rem));
  padding: 0 0 4.5rem;
}
.page-home .market-hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1.6rem;
  min-height: 25.625rem;
  margin: 0;
}
.page-home .market-hero-copy {
  max-width: 35.9375rem;
  padding: 3.35rem 0 3.35rem 0.35rem;
}
.page-home .market-hero h2 {
  max-width: 11.5ch;
  margin: 0.6rem 0 1rem;
  font-size: clamp(3.15rem, 4.8vw, 4.3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}
.page-home .market-hero-copy > p:not(.kicker):not(.home-actions) {
  font-size: 1.0625rem;
  line-height: 1.52;
}
.page-home .home-actions {
  gap: 0.65rem;
  margin-top: 1.55rem;
}
.page-home .home-actions .button {
  min-width: 9.5rem;
}
.page-home .hero-facts {
  margin: 0 0 1.55rem;
  padding: 1.15rem 0;
  background: transparent;
}
.page-home .hero-facts li {
  column-gap: 0.65rem;
  padding-inline: 1.15rem;
}
.page-home .hero-facts li:first-child {
  padding-left: 0;
}
.page-home .fact-icon {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 7px;
}
.page-home .market-latest {
  margin: 0 0 1.6rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgb(35 83 150 / 5%);
}
.page-home .market-latest-heading {
  min-height: 2.4rem;
}
.page-home .market-latest-heading h3::after {
  bottom: -0.93rem;
  border-radius: 99px;
}
.page-home .market-tabs {
  padding: 0.9rem 0.3rem 0.75rem;
}
.page-home .market-tabs a {
  min-height: 1.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 7px;
}
.page-home .market-list li {
  min-height: 4rem;
  padding: 0.62rem 0.7rem;
}
.page-home .home-workflow {
  gap: 0.9rem;
  margin: 0;
  padding: 0.3rem 0 1.45rem;
}
.page-home .home-workflow li {
  gap: 0.75rem;
  padding: 0.2rem 1.3rem;
}
.page-home .home-workflow li:first-child {
  padding-left: 0;
}
.page-home .home-workflow li > span {
  flex-basis: 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
}
.page-home .home-benefits {
  margin: 1.35rem 0 0;
}
.page-home .home-benefits h3 {
  margin-bottom: 0.85rem;
}
.page-home .home-benefits li {
  gap: 0.68rem;
  padding: 0.2rem 1rem;
}
.page-home .home-benefits li:first-child {
  padding-left: 0;
}
.page-home .home-benefits li > span {
  flex-basis: 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
}
@media (max-width: 1099px) {
  .page-home .market-hero {
    grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 0.82fr);
    gap: 0.8rem;
    min-height: 22.5rem;
  }
  .page-home .market-hero-copy {
    padding-block: 2.6rem;
  }
  .page-home .market-hero h2 {
    font-size: clamp(2.9rem, 5.7vw, 3.7rem);
  }
}
@media (max-width: 699px) {
  .page-home main {
    width: min(var(--page-width), calc(100% - 1.5rem));
  }
  .page-home .market-hero {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .page-home .market-hero-copy {
    padding: 2rem 0 1.35rem;
  }
  .page-home .market-hero h2 {
    font-size: clamp(2.7rem, 13vw, 3.35rem);
  }
  .page-home .market-art {
    margin-top: 0;
  }
  .page-home .hero-facts {
    gap: 1rem 0;
    margin-bottom: 1.25rem;
    padding: 1rem 0;
  }
  .page-home .hero-facts li {
    padding: 0 0.75rem;
  }
  .page-home .hero-facts li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .page-home .market-latest {
    margin-bottom: 1.4rem;
    padding: 0.75rem 0.8rem 0.85rem;
    border-radius: 10px;
  }
  .page-home .home-workflow {
    margin: 0;
    padding: 0.2rem 0 1.2rem;
  }
  .page-home .home-workflow ol {
    gap: 0.9rem;
  }
  .page-home .home-benefits {
    margin-top: 1.2rem;
  }
  .page-home .home-benefits ul {
    gap: 1rem 0;
  }
  .page-home .home-benefits li {
    padding: 0 0.6rem;
  }
  .page-home .home-benefits li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 460px) {
  .page-home .home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .page-home .home-actions .button {
    width: 100%;
  }
  .page-home .hero-facts,
  .page-home .home-benefits ul {
    grid-template-columns: 1fr;
  }
  .page-home .hero-facts li,
  .page-home .hero-facts li:nth-child(odd),
  .page-home .home-benefits li,
  .page-home .home-benefits li:nth-child(odd) {
    padding: 0;
    border-left: 0;
  }
}

/* Gig control center: client-facing control surface. */
/* The global bar stays available while reviewing a long agreement. */
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 1px 0 rgb(11 22 53 / 4%);
  backdrop-filter: blur(12px) saturate(130%);
}
.page-gig main {
  width: min(1240px, calc(100% - 2rem));
  padding-top: 1.5rem;
}
.page-gig .gig-page-layout {
  grid-template-columns: minmax(0, 1fr) 19.5rem;
  gap: 1rem;
  margin-top: 1rem;
}
.page-gig .gig-main {
  display: contents;
}
.page-gig .gig-main > :not(.gig-back):not(.gig-summary):not(.gig-view-tabs) {
  grid-column: 1;
}
.page-gig .gig-back {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.page-gig .gig-summary {
  grid-column: 1 / -1;
  position: relative;
  margin: 0;
  padding: 1.55rem 15.5rem 1.3rem 1.65rem;
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(29 67 116 / 6%);
}
.page-gig .gig-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.page-gig .gig-summary h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}
.page-gig .gig-title-row .browse-rails {
  display: inline-flex;
  gap: 0.35rem;
}
.page-gig .gig-summary > .gig-lede {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}
.page-gig .gig-meta {
  gap: 0;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.page-gig .gig-meta > li {
  padding: 0 1.2rem;
  border-left: 1px solid var(--line);
}
.page-gig .gig-meta > li:first-child {
  padding-left: 0;
  border-left: 0;
}
.page-gig .gig-meta > li > .icon {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.5rem;
  border-radius: 10px;
  color: var(--blue);
  background: var(--blue-soft);
}
.page-gig .gig-meta-reward strong {
  font-size: 1.28rem;
  font-weight: 700;
}
.page-gig .gig-meta small {
  margin-top: 0.08rem;
  color: var(--muted-2);
}
.page-gig .gig-hero-actions {
  position: absolute;
  top: 1.55rem;
  right: 1.65rem;
  display: grid;
  gap: 0.55rem;
  width: 12rem;
}
.page-gig .gig-hero-actions .button {
  justify-content: center;
  min-height: 2.6rem;
  border-radius: 9px;
  font-size: 0.9rem;
}
.page-gig .gig-timeline {
  max-width: none;
  margin: 1.35rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.page-gig .gig-timeline li {
  padding-top: 1.25rem;
  color: var(--muted);
  text-align: center;
}
.page-gig .gig-timeline li::before {
  left: calc(50% - 0.25rem);
}
.page-gig .gig-view-tabs {
  grid-column: 1;
  position: sticky;
  z-index: 80;
  top: 4.75rem;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  margin: 0;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 8px 22px rgb(29 67 116 / 5%);
  backdrop-filter: blur(10px);
  scrollbar-width: none;
}
.page-gig .gig-view-tabs::-webkit-scrollbar {
  display: none;
}
.page-gig .gig-view-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  color: #51647f;
  font-size: 0.87rem;
  font-weight: 650;
  text-decoration: none;
}
.page-gig .gig-view-tabs a:first-child {
  color: #d65f00;
  background: var(--orange-soft);
}
.page-gig .gig-view-tabs a:hover {
  color: var(--blue);
  background: #f4f8ff;
}
.page-gig .gig-view-tabs span {
  display: inline-grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding-inline: 0.32rem;
  border-radius: 999px;
  color: #3b5e89;
  background: #e9f2ff;
  font-size: 0.7rem;
}
.page-gig .gig-sidebar {
  grid-column: 2;
  grid-row: 4;
  top: 5.25rem;
  gap: 0.85rem;
}
.page-gig .gig-overview-card {
  margin-top: 0;
}
.page-gig .gig-section {
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgb(29 67 116 / 4%);
}
.page-gig .gig-section > h3,
.page-gig .action-area > h3 {
  font-size: 1.05rem;
}
.page-gig .gig-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}
.page-gig .gig-section-heading h3 {
  margin: 0;
}
.page-gig .gig-section-heading p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.page-gig .gig-funding-card {
  scroll-margin-top: 8rem;
}
.page-gig .gig-funding-card > p {
  max-width: 68ch;
}
.page-gig .gig-funding-card code {
  overflow-wrap: anywhere;
}
.page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: center;
  max-width: 38rem;
  margin: 1.15rem 0 0;
  padding: 0.85rem;
  border: 1px solid #d7e8fc;
  border-radius: 12px;
  background: #f8fbff;
}
.page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] h4 {
  grid-column: 2;
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
}
.page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] img {
  grid-row: 1 / span 4;
  width: 10.5rem;
  height: 10.5rem;
  max-width: 100%;
  margin: 0;
  padding: 0.25rem;
  border-radius: 8px;
  background: #fff;
}
.page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] p {
  grid-column: 2;
  margin: 0;
  color: #4f6688;
  font-size: 0.84rem;
  line-height: 1.45;
}
.page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] code {
  grid-column: 2;
  display: block;
  overflow-wrap: anywhere;
  color: #51647f;
  font-size: 0.7rem;
}
.page-gig .action-area {
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 6px 20px rgb(29 67 116 / 4%);
}
.page-gig .gig-sidebar-next {
  border-radius: 14px;
}
.page-gig .gig-side-card,
.page-gig .gig-escrow-note {
  border-radius: 14px;
  box-shadow: 0 6px 20px rgb(29 67 116 / 4%);
}
.page-gig #overview,
.page-gig #applications,
.page-gig #messages,
.page-gig #funding,
.page-gig #activity,
.page-gig #actions {
  scroll-margin-top: 8rem;
}

@media (max-width: 999px) {
  .page-gig .gig-page-layout {
    grid-template-columns: 1fr;
  }
  .page-gig .gig-main {
    display: block;
    min-width: 0;
  }
  .page-gig .gig-main > * {
    grid-column: auto;
  }
  .page-gig .gig-summary {
    padding-right: 1.6rem;
  }
  .page-gig .gig-hero-actions {
    position: static;
    display: flex;
    width: auto;
    margin-top: 1rem;
  }
  .page-gig .gig-sidebar {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }
  .page-gig .gig-view-tabs {
    top: 4.25rem;
    margin: 1rem 0 0.85rem;
  }
}
@media (max-width: 699px) {
  body > header {
    backdrop-filter: none;
  }
  .page-gig main {
    width: min(100% - 1.5rem, 760px);
    padding-top: 1rem;
  }
  .page-gig .gig-summary {
    padding: 1.15rem 1rem 1rem;
    border-radius: 12px;
  }
  .page-gig .gig-summary h2 {
    font-size: 2rem;
  }
  .page-gig .gig-meta {
    gap: 0.75rem 0;
  }
  .page-gig .gig-meta > li {
    padding: 0 0.8rem;
    border-left: 0;
  }
  .page-gig .gig-meta > li:first-child {
    padding-left: 0;
  }
  .page-gig .gig-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .page-gig .gig-view-tabs {
    top: 3.9rem;
    margin-inline: 0;
    border-radius: 10px;
  }
  .page-gig .gig-section,
  .page-gig .action-area {
    padding: 1.05rem;
    border-radius: 12px;
  }
  .page-gig .gig-section-heading {
    flex-direction: column;
    gap: 0.45rem;
  }
  .page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] {
    grid-template-columns: 1fr;
  }
  .page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] img {
    grid-column: 1;
    grid-row: auto;
    width: min(14rem, 100%);
    height: auto;
    justify-self: center;
  }
  .page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] h4,
  .page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] p,
  .page-gig .gig-funding-card > section[aria-labelledby='funding-qr'] code {
    grid-column: 1;
  }
}

/* Find work: marketplace browse surface. Keeps operational filters and results intact. */
.page-gigs main {
  width: min(1240px, calc(100% - 2rem));
  padding: 0 0 4rem;
}
.page-gigs .browse-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(25rem, 1.06fr);
  min-height: 20.5rem;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-gigs .browse-hero-copy {
  z-index: 1;
  align-self: center;
  max-width: 39rem;
  padding: 3.3rem 0 2.4rem 2.2rem;
}
.page-gigs .browse-hero h2 {
  margin: 0;
  color: #071533;
  font-size: clamp(2.75rem, 5vw, 4.55rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}
.page-gigs .browse-hero h2 em {
  color: #ff6b10;
  font-style: normal;
}
.page-gigs .browse-hero-copy > p {
  max-width: 35rem;
  margin: 1rem 0 1.55rem;
  color: #56709a;
  font-size: 1.08rem;
  line-height: 1.5;
}
.page-gigs .browse-hero-art {
  position: relative;
  min-height: 20.5rem;
  overflow: hidden;
}
.page-gigs .browse-hero-art::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  background: linear-gradient(90deg, #f8fbff 0%, transparent 24%);
  pointer-events: none;
}
.page-gigs .browse-hero-art img {
  position: absolute;
  right: -1rem;
  bottom: -4.5rem;
  width: min(39rem, 115%);
  max-width: none;
  height: auto;
}
.page-gigs .browse-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.page-gigs .browse-facts li {
  display: grid;
  grid-template-columns: 1.8rem auto;
  gap: 0.5rem;
  align-items: center;
  min-width: 8.5rem;
}
.page-gigs .browse-facts li > span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  color: #0877f9;
  font-weight: 800;
  font-size: 0.67rem;
}
.page-gigs .browse-facts svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.8;
}
.page-gigs .browse-facts strong {
  display: block;
  color: #10244a;
  font-size: 0.8rem;
  line-height: 1.2;
}
.page-gigs .browse-facts small {
  display: block;
  max-width: 10rem;
  margin-top: 0.12rem;
  color: #7183a4;
  font-size: 0.67rem;
  line-height: 1.25;
}
.page-gigs .market-controls {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-height: 4.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #dce8f8;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.4rem 1.2rem rgb(23 67 119 / 4%);
}
.page-gigs .market-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  flex: 1;
  align-items: center;
  min-height: 2.65rem;
  overflow: hidden;
  border: 1px solid #cfe0f5;
  border-radius: 0.55rem;
  background: #fff;
}
.page-gigs .market-search > span {
  display: grid;
  place-items: center;
  width: 2.8rem;
  color: #58709a;
}
.page-gigs .market-search svg {
  width: 1.05rem;
  height: 1.05rem;
}
.page-gigs .market-search input {
  width: 100%;
  min-width: 0;
  height: 2.55rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.page-gigs .market-search input:focus {
  outline: 0;
}
.page-gigs .market-search:focus-within {
  border-color: #0877f9;
  box-shadow: 0 0 0 3px rgb(8 119 249 / 12%);
}
.page-gigs .market-search button {
  width: auto;
  min-height: 2.15rem;
  margin: 0.2rem;
  padding: 0 0.9rem;
  border-radius: 0.4rem;
  font-size: 0.82rem;
}
.page-gigs .filter-trigger {
  display: none;
  width: auto;
  margin: 0;
  white-space: nowrap;
}
.page-gigs .filter-trigger svg {
  width: 1rem;
  height: 1rem;
}
.page-gigs .filter-backdrop {
  display: none;
}
.page-gigs .browse-layout {
  display: grid;
  grid-template-columns: 15.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.05rem;
}
.page-gigs .browse-filter-panel {
  position: sticky;
  top: 5rem;
  border: 1px solid #dce8f8;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 0.35rem 1rem rgb(23 67 119 / 3%);
}
.page-gigs .filter-mobile-head {
  display: none;
}
.page-gigs .browse-filter-panel form {
  padding: 1rem;
}
.page-gigs .filter-heading {
  align-items: baseline;
  margin: 0 0 1.05rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #e7eef8;
}
.page-gigs .filter-heading h3 {
  margin: 0;
  color: #0a1a3d;
  font-size: 1.05rem;
}
.page-gigs .filter-heading a {
  color: #0877f9;
  font-size: 0.76rem;
}
.page-gigs .browse-filter-panel fieldset {
  margin: 0;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid #e7eef8;
}
.page-gigs .browse-filter-panel fieldset:last-of-type {
  border-bottom: 0;
}
.page-gigs .browse-filter-panel legend {
  margin-bottom: 0.45rem;
  color: #17274b;
  font-size: 0.78rem;
  font-weight: 750;
}
.page-gigs .browse-filter-panel select,
.page-gigs .browse-filter-panel input {
  min-height: 2.35rem;
  font-size: 0.8rem;
}
.page-gigs .browse-filter-panel .filter-range {
  gap: 0.4rem;
}
.page-gigs .browse-filter-panel .filter-range label {
  color: #6a7d9d;
  font-size: 0.68rem;
}
.page-gigs .browse-filter-panel button[type='submit'] {
  width: 100%;
  margin-top: 1rem;
  padding: 0.63rem 0.8rem;
  font-size: 0.82rem;
}
.page-gigs .browse-results {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-gigs .browse-results-toolbar {
  align-items: center;
  min-height: 3.5rem;
  padding: 0.25rem 0.15rem 0.7rem;
  border-bottom: 1px solid #dce8f8;
}
.page-gigs .browse-results-toolbar h3 {
  margin: 0;
  color: #0a1a3d;
  font-size: 1.1rem;
}
.page-gigs .browse-results-toolbar p {
  margin: 0.18rem 0 0;
  font-size: 0.76rem;
}
.page-gigs .browse-sort-tabs {
  gap: 0.15rem;
  margin-left: auto;
}
.page-gigs .browse-sort-tabs a {
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  color: #536c95;
  font-size: 0.77rem;
}
.page-gigs .browse-sort-tabs a.is-active {
  color: #086bef;
  background: #edf5ff;
  box-shadow: inset 0 -2px #0877f9;
}
.page-gigs .browse-post-button {
  width: auto;
  margin-left: 0.45rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
}
.page-gigs .browse-list {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0 0;
  margin: 0;
  list-style: none;
}
.page-gigs .browse-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.8rem;
  min-height: 10.25rem;
  overflow: hidden;
  border: 1px solid #dce8f8;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.28rem 0.9rem rgb(23 67 119 / 3%);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}
.page-gigs .browse-card:hover {
  border-color: #bbd8fa;
  box-shadow: 0 0.7rem 1.5rem rgb(23 67 119 / 9%);
  transform: translateY(-1px);
}
.page-gigs .browse-card-main {
  min-width: 0;
  padding: 1.05rem 1.2rem;
}
.page-gigs .browse-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  align-items: center;
  min-height: 1.35rem;
}
.page-gigs .browse-rails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.page-gigs .browse-card-open {
  color: #148650;
  font-size: 0.7rem;
  font-weight: 700;
}
.page-gigs .browse-card-title {
  display: block;
  margin-top: 0.45rem;
  color: #0b1a3b;
  font-size: 1.04rem;
  font-weight: 780;
  line-height: 1.25;
  text-decoration: none;
}
.page-gigs .browse-card-title:hover {
  color: #0877f9;
}
.page-gigs .browse-card-description {
  display: -webkit-box;
  max-width: 48rem;
  margin: 0.38rem 0 0.8rem;
  overflow: hidden;
  color: #62779d;
  font-size: 0.81rem;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.page-gigs .browse-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: center;
  color: #667b9e;
  font-size: 0.73rem;
}
.page-gigs .browse-card-meta a,
.page-gigs .browse-card-meta time {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.page-gigs .browse-card-meta a:hover {
  color: #0877f9;
}
.page-gigs .browse-card-meta svg {
  width: 0.9rem;
  height: 0.9rem;
}
.page-gigs .browse-card-value {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1.05rem;
  border-left: 1px solid #e2ebf7;
  background: #fbfdff;
}
.page-gigs .browse-card-value > span {
  color: #7183a3;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-gigs .browse-card-value strong {
  color: #071a42;
  font-family: var(--font-mono);
  font-size: 0.96rem;
  letter-spacing: -0.035em;
}
.page-gigs .browse-card-arrow {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid #cfe0f5;
  border-radius: 50%;
  color: #0877f9;
}
.page-gigs .browse-card-arrow:hover {
  border-color: #0877f9;
  background: #0877f9;
  color: #fff;
}
.page-gigs .browse-card-arrow svg {
  width: 0.9rem;
  height: 0.9rem;
}
.page-gigs .browse-empty {
  margin-top: 0.85rem;
  border-radius: 0.75rem;
}
.page-gigs .browse-pagination {
  margin-top: 1rem;
}

@media (max-width: 980px) {
  .page-gigs .browse-hero {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  }
  .page-gigs .browse-hero-copy {
    padding-left: 1rem;
  }
  .page-gigs .browse-hero-art img {
    right: -3.5rem;
  }
  .page-gigs .browse-results-toolbar {
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
  }
  .page-gigs .browse-sort-tabs {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  body[data-filter-open='true'] {
    overflow: hidden;
  }
  .page-gigs main {
    width: min(100% - 1.25rem, 760px);
    padding-bottom: 2.5rem;
  }
  .page-gigs .browse-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .page-gigs .browse-hero-copy {
    padding: 2.2rem 0.35rem 1.4rem;
  }
  .page-gigs .browse-hero h2 {
    font-size: clamp(2.65rem, 13vw, 3.7rem);
  }
  .page-gigs .browse-hero-copy > p {
    font-size: 1rem;
  }
  .page-gigs .browse-hero-art {
    display: none;
  }
  .page-gigs .market-controls {
    position: sticky;
    top: 3.9rem;
    z-index: 10;
    padding: 0.55rem;
  }
  .page-gigs .market-search button {
    display: none;
  }
  .page-gigs .filter-trigger {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    width: auto;
    min-height: 2.45rem;
    margin: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid #cfe0f5;
    border-radius: 0.5rem;
    background: #fff;
    color: #17436d;
    font-weight: 700;
    font-size: 0.76rem;
  }
  .page-gigs .filter-backdrop {
    position: fixed;
    z-index: 39;
    inset: 0;
    background: rgb(5 20 46 / 42%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .page-gigs .browse-layout {
    display: block;
    margin-top: 0.85rem;
  }
  .page-gigs .browse-filter-panel {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(21rem, 90vw);
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    box-shadow: -1rem 0 2.5rem rgb(4 25 55 / 20%);
    transform: translateX(105%);
    transition: transform 0.2s ease;
  }
  body.page-gigs[data-filter-open='true'] .browse-filter-panel {
    transform: translateX(0);
  }
  body.page-gigs[data-filter-open='true'] .filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .page-gigs .filter-mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e7eef8;
    color: #0a1a3d;
  }
  .page-gigs .filter-mobile-head button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid #d4e2f4;
    border-radius: 0.45rem;
    background: #fff;
    color: #17436d;
    font-size: 1.25rem;
    line-height: 1;
  }
  .page-gigs .browse-filter-panel form {
    padding: 0.6rem 1rem 1.25rem;
  }
  .page-gigs .browse-results-toolbar {
    align-items: flex-start;
  }
  .page-gigs .browse-post-button {
    margin-left: 0;
  }
}
@media (max-width: 540px) {
  .page-gigs .browse-hero-copy {
    padding-top: 1.75rem;
  }
  .page-gigs .browse-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.85rem;
  }
  .page-gigs .browse-facts li:last-child {
    grid-column: 1 / -1;
  }
  .page-gigs .browse-results-toolbar h3 {
    font-size: 1rem;
  }
  .page-gigs .browse-sort-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }
  .page-gigs .browse-sort-tabs a {
    flex: 0 0 auto;
  }
  .page-gigs .browse-card {
    grid-template-columns: 1fr;
  }
  .page-gigs .browse-card-main {
    padding: 0.95rem;
  }
  .page-gigs .browse-card-value {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    min-height: 3.75rem;
    padding: 0.75rem 0.95rem;
    border-top: 1px solid #e2ebf7;
    border-left: 0;
  }
  .page-gigs .browse-card-arrow {
    top: 0.85rem;
    right: 0.95rem;
    bottom: auto;
  }
}

/* Gig control center: multi-view interaction and escrow funding clarity. */
.page-gig .gig-view-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #51647f;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 650;
  cursor: pointer;
}
.page-gig .gig-view-tabs button[aria-selected='true'] {
  color: #d65f00;
  background: var(--orange-soft);
}
.page-gig .gig-view-tabs button:hover {
  color: var(--blue);
  background: #f4f8ff;
}
.page-gig [data-gig-view-panel][hidden] {
  display: none !important;
}
.page-gig .gig-funding-card {
  padding: 1.35rem 1.45rem;
}
.page-gig .funding-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0;
}
.page-gig .funding-summary > div {
  padding: 0.72rem 0.8rem;
  border: 1px solid #deebf8;
  border-radius: 10px;
  background: #fbfdff;
}
.page-gig .funding-summary dt {
  margin-bottom: 0.2rem;
  color: #667b9c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-gig .funding-summary dd {
  margin: 0;
  color: #10244a;
  font-size: 0.92rem;
  font-weight: 750;
}
.page-gig .funding-payment-request {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid #cfe1f8;
  border-radius: 11px;
  background: #f8fbff;
}
.page-gig .funding-payment-request span {
  display: block;
  margin-bottom: 0.4rem;
  color: #294a76;
  font-size: 0.83rem;
  font-weight: 700;
}
.page-gig .funding-payment-request code {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  background: #fff;
  color: #17365f;
  font-size: 0.8rem;
}
.page-gig .funding-payment-request.is-readonly {
  background: #fbfcfe;
}
.page-gig .funding-qr-card {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  max-width: 43rem;
  margin: 1rem 0;
  padding: 0.9rem;
  border: 1px solid #cfe1f8;
  border-radius: 12px;
  background: #fff;
}
.page-gig .funding-qr-card img {
  width: 10rem;
  height: 10rem;
  margin: 0;
  padding: 0.25rem;
  border-radius: 8px;
  background: #fff;
}
.page-gig .funding-qr-card h4 {
  margin: 0 0 0.35rem;
  color: #10244a;
  font-size: 1rem;
}
.page-gig .funding-qr-card p {
  margin: 0.3rem 0;
  color: #4f6688;
  font-size: 0.84rem;
  line-height: 1.45;
}
.page-gig .funding-qr-card .funding-verify {
  color: #294a76;
  font-weight: 700;
}
.page-gig .funding-qr-card code {
  display: block;
  max-height: 3.2rem;
  overflow: auto;
  margin-top: 0.5rem;
  padding: 0.45rem;
  border-radius: 5px;
  background: #f3f6fa;
  color: #51647f;
  font-size: 0.67rem;
}
.page-gig .funding-fee-note,
.page-gig .escrow-recovery-copy {
  max-width: 47rem;
  color: #5c7295;
  font-size: 0.8rem;
  line-height: 1.45;
}
.page-gig .escrow-recovery-explainer {
  margin-top: 0.75rem;
}
.page-gig .escrow-recovery-explainer summary {
  color: #10234a;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.page-gig [data-live-thread][data-gig-view-panel] {
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(29 67 116 / 4%);
}

@media (max-width: 699px) {
  .page-gig .gig-view-tabs button {
    min-height: 2.25rem;
    padding-inline: 0.7rem;
    font-size: 0.82rem;
  }
  .page-gig .funding-summary {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .page-gig .funding-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
  }
  .page-gig .funding-summary dt {
    margin: 0;
  }
  .page-gig .funding-qr-card {
    grid-template-columns: 1fr;
  }
  .page-gig .funding-qr-card img {
    justify-self: center;
    width: min(14rem, 100%);
    height: auto;
  }
}

/* Gig control center: final timeline and funding refinement. */
.page-gig .gig-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: none;
  gap: 0;
  margin: 1.3rem 0 0;
  padding: 0;
  border: 0;
}
.page-gig .gig-timeline::before,
.page-gig .gig-timeline::after {
  position: absolute;
  top: 0.3rem;
  left: calc(100% / 12);
  height: 1px;
  content: '';
}
.page-gig .gig-timeline::before {
  right: calc(100% / 12);
  background: #b8cce6;
}
.page-gig .gig-timeline::after {
  width: var(--timeline-progress, 0%);
  background: #ff7417;
}
/* Track runs from the centre of dot 1 to the centre of dot 6. */
.page-gig .gig-timeline.is-stage-0 {
  --timeline-progress: 0%;
}
.page-gig .gig-timeline.is-stage-1 {
  --timeline-progress: 16.6667%;
}
.page-gig .gig-timeline.is-stage-2 {
  --timeline-progress: 33.3333%;
}
.page-gig .gig-timeline.is-stage-3 {
  --timeline-progress: 50%;
}
.page-gig .gig-timeline.is-stage-4 {
  --timeline-progress: 66.6667%;
}
.page-gig .gig-timeline.is-stage-5 {
  --timeline-progress: 83.3333%;
}
.page-gig .gig-timeline li {
  z-index: 1;
  min-width: 0;
  padding: 0.95rem 0.25rem 0;
  border: 0;
  color: #6c7e9b;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
}
.page-gig .gig-timeline li::before {
  top: 0;
  left: calc(50% - 0.28rem);
  width: 0.56rem;
  height: 0.56rem;
  box-sizing: border-box;
  border: 1px solid #a9c1df;
  background: #f8fbff;
}
.page-gig .gig-timeline li.is-done,
.page-gig .gig-timeline li.is-current {
  color: #172c50;
}
.page-gig .gig-timeline li.is-done::before,
.page-gig .gig-timeline li.is-current::before {
  border-color: #ff7417;
  background: #ff7417;
}
.page-gig .gig-timeline li.is-current {
  font-weight: 800;
}
.page-gig .gig-funding-card .gig-section-heading {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #deebf8;
}
.page-gig .gig-funding-card .gig-section-heading > div > p {
  max-width: 42rem;
}
.page-gig .funding-payment-request {
  margin-top: 0.85rem;
}
.page-gig .funding-chain-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: baseline;
  max-width: 44rem;
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid #1b8c58;
  background: #f1fbf5;
  color: #2d5e4b;
}
.page-gig .funding-chain-status strong {
  color: #14613b;
  font-size: 0.88rem;
}
.page-gig .funding-chain-status > span {
  color: #437a63;
  font-size: 0.78rem;
}
.page-gig .funding-chain-status p {
  flex-basis: 100%;
  margin: 0;
  color: #4a6c5d;
  font-size: 0.78rem;
}
.page-gig .funding-chain-status a {
  font-weight: 700;
}
.page-gig .action-area {
  margin-top: 1rem;
  padding: 1.2rem 1.45rem;
  border: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 14px;
  background: #fff;
}
.page-gig .action-area > h3 {
  margin: 0 0 0.8rem;
}
.page-gig .action-area > p:first-of-type {
  margin-top: 0;
}
.page-gig .gig-sidebar-next .button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 699px) {
  .page-gig .gig-timeline {
    min-width: 31rem;
  }
  .page-gig .gig-summary {
    overflow-x: auto;
  }
  .page-gig .gig-timeline li {
    font-size: 0.66rem;
  }
  .page-gig .action-area {
    padding: 1.05rem;
  }
}

/* Timeline finishing: one visual track, centred status dots. */
/* The metadata divider was competing with the progress track. */
.page-gig .gig-meta {
  border-bottom: 0;
  padding-bottom: 0.75rem;
}
.page-gig .gig-timeline {
  margin-top: 0.65rem;
  padding-top: 0;
}
.page-gig .gig-timeline::before,
.page-gig .gig-timeline::after {
  top: 0.3125rem;
  height: 2px;
}
.page-gig .gig-timeline::before {
  background: #b9cbe3;
}
.page-gig .gig-timeline::after {
  background: #ff7417;
}
.page-gig .gig-timeline li {
  padding-top: 1.15rem;
}
.page-gig .gig-timeline li::before {
  top: 0;
  left: calc(50% - 0.3125rem);
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #a9c1df;
  background: #f8fbff;
  box-shadow: 0 0 0 2px #fff;
}
.page-gig .gig-timeline li.is-done::before,
.page-gig .gig-timeline li.is-current::before {
  border-color: #ff7417;
  background: #ff7417;
}

/* Notifications: operational inbox, consistent with marketplace surfaces. */
.page-notifications main {
  width: min(var(--page-width), calc(100% - 2rem));
  padding-top: 0;
}
.notifications-page {
  padding-bottom: 4rem;
}
.notifications-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr);
  min-height: 13.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.notifications-hero-copy {
  align-self: center;
  max-width: 46rem;
  padding: 2.5rem 0 2rem 1.4rem;
}
.notifications-hero h2 {
  margin: 0;
  color: #071533;
  font-size: clamp(2.8rem, 5vw, 4.35rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.98;
}
.notifications-hero p {
  max-width: 38rem;
  margin: 0.85rem 0 0;
  color: #56709a;
  font-size: 1.05rem;
  line-height: 1.5;
}
.notifications-hero-art {
  position: relative;
  min-height: 13.5rem;
  overflow: hidden;
}
.notifications-hero-art picture,
.notifications-hero-art img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(27rem, 120%);
  height: auto;
}
.notifications-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #dce8f8;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 0.35rem 1rem rgb(23 67 119 / 3%);
}
.notifications-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.notifications-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.78rem;
  border: 1px solid #d5e3f5;
  border-radius: 0.45rem;
  color: #435f89;
  background: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}
.notifications-tabs a[aria-current='page'] {
  border-color: #ffd0aa;
  color: #d85e06;
  background: #fff1e4;
}
.notifications-tabs a:hover {
  border-color: #9fc7fb;
  color: #0877f9;
}
.notifications-tabs b {
  display: grid;
  min-width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0 0.25rem;
  border-radius: 999px;
  color: #0b66d3;
  background: #e9f3ff;
  font-size: 0.7rem;
}
.notifications-toolbar form {
  margin: 0;
}
.notifications-toolbar .button {
  width: auto;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.42rem 0.75rem;
}
.notifications-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1rem;
  align-items: start;
}
.notifications-feed,
.notifications-summary,
.notifications-policy {
  border: 1px solid #dce8f8;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 0.35rem 1rem rgb(23 67 119 / 3%);
}
.notifications-feed {
  overflow: hidden;
}
.notifications-feed-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.2rem 0.95rem;
  border-bottom: 1px solid #e1ebf7;
}
.notifications-feed-heading h3,
.notifications-side-heading h3,
.notifications-policy h3 {
  margin: 0;
  color: #0a1a3d;
  font-size: 1.1rem;
}
.notifications-feed-heading p {
  margin: 0.25rem 0 0;
  color: #7183a2;
  font-size: 0.8rem;
}
.notifications-feed-heading > span {
  color: #46658f;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}
.notifications-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.notifications-list li {
  display: grid;
  grid-template-columns: 0.55rem 2.35rem minmax(0, 1fr) auto 1.6rem;
  gap: 0.75rem;
  align-items: center;
  min-height: 5rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid #e7eef8;
}
.notifications-list li:first-child {
  border-top: 0;
}
.notifications-list li.is-unread {
  background: #fbfdff;
}
.notifications-list li:hover {
  background: #f6faff;
}
.notification-unread-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: transparent;
}
.notifications-list .is-unread .notification-unread-dot {
  background: #0877f9;
  box-shadow: 0 0 0 3px #e7f2ff;
}
.notification-type-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
}
.notification-type-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}
.notification-type-icon.is-proposals {
  color: #0877f9;
  background: #eaf4ff;
}
.notification-type-icon.is-gigs {
  color: #6d56d8;
  background: #f0edff;
}
.notification-type-icon.is-escrow {
  color: #d96100;
  background: #fff0df;
}
.notification-type-icon.is-messages {
  color: #158453;
  background: #e8f8ef;
}
.notification-type-icon.is-system {
  color: #576d91;
  background: #edf2f8;
}
.notification-content {
  min-width: 0;
}
.notification-content a {
  display: block;
  overflow: hidden;
  color: #10244a;
  font-size: 0.91rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-content a:hover {
  color: #0877f9;
}
.notification-content p {
  overflow: hidden;
  margin: 0.22rem 0 0;
  color: #6d7f9e;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-content p span {
  padding-inline: 0.22rem;
  color: #a0aec1;
}
.notifications-list time {
  color: #7183a2;
  font-size: 0.74rem;
  white-space: nowrap;
}
.notification-open {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  color: #5f7ca5;
}
.notification-open:hover {
  color: #fff;
  background: #0877f9;
}
.notification-open .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.notifications-sidebar {
  display: grid;
  gap: 0.85rem;
  position: sticky;
  top: 5rem;
}
.notifications-summary {
  padding: 1rem 1.05rem;
}
.notifications-side-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e1ebf7;
}
.notifications-side-heading > span {
  color: #0877f9;
  font-size: 0.76rem;
  font-weight: 750;
}
.notifications-summary-list {
  display: grid;
  margin-top: 0.55rem;
}
.notifications-summary-list > div {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.45rem;
  border-top: 1px solid #eef3f9;
}
.notifications-summary-list > div:first-child {
  border-top: 0;
}
.notifications-summary-list .notification-type-icon {
  width: 1.65rem;
  height: 1.65rem;
}
.notifications-summary-list .notification-type-icon .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.notifications-summary-list strong {
  color: #415b82;
  font-size: 0.8rem;
  font-weight: 650;
}
.notifications-summary-list b {
  display: grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  color: #405d86;
  background: #eef4fb;
  font-size: 0.7rem;
}
.notifications-policy {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
}
.notifications-policy > span {
  color: #0877f9;
}
.notifications-policy > span .icon {
  width: 1.55rem;
  height: 1.55rem;
}
.notifications-policy p {
  margin: 0.35rem 0 0.55rem;
  color: #607698;
  font-size: 0.8rem;
  line-height: 1.45;
}
.notifications-policy a {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 750;
  text-decoration: none;
}
.notifications-empty {
  display: grid;
  justify-items: center;
  max-width: 31rem;
  padding: 4rem 1.25rem;
  margin: 0 auto;
  text-align: center;
}
.notifications-empty > span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  color: #168a55;
  background: #e7f8ef;
}
.notifications-empty > span .icon {
  width: 1.45rem;
  height: 1.45rem;
}
.notifications-empty h4 {
  margin: 0.8rem 0 0.25rem;
  color: #10244a;
  font-size: 1.05rem;
}
.notifications-empty p {
  margin: 0;
  color: #667b9d;
  font-size: 0.86rem;
  line-height: 1.45;
}
.notifications-empty a {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 1rem;
  font-weight: 750;
  text-decoration: none;
}
@media (max-width: 860px) {
  .notifications-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .notifications-hero-copy {
    padding: 2rem 0.25rem 1.3rem;
  }
  .notifications-hero-art {
    display: none;
  }
  .notifications-layout {
    grid-template-columns: 1fr;
  }
  .notifications-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .page-notifications main {
    width: min(100% - 1.25rem, 760px);
  }
  .notifications-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .notifications-toolbar .button {
    width: 100%;
  }
  .notifications-list li {
    grid-template-columns: 0.45rem 2.1rem minmax(0, 1fr) 1.4rem;
    gap: 0.55rem;
    min-height: 4.65rem;
    padding: 0.75rem;
  }
  .notifications-list time {
    display: none;
  }
  .notification-content a {
    font-size: 0.84rem;
  }
  .notifications-sidebar {
    grid-template-columns: 1fr;
  }
  .notifications-hero h2 {
    font-size: 2.7rem;
  }
}

/* My gigs: a compact operational dashboard. */
body > form.mygigs-email-confirmation {
  width: min(1280px, calc(100% - 2rem));
  margin: 0.85rem auto 0;
  padding: 0.78rem 1rem;
  border: 1px solid #ffd7b4;
  border-left: 3px solid var(--orange);
  border-radius: 0.45rem;
  background: #fff7ef;
  color: #543317;
}
.mygigs-email-confirmation p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  color: #71451f;
  font-size: 0.88rem;
  line-height: 1.45;
}
.mygigs-email-confirmation strong {
  color: #2c1c11;
}
.mygigs-email-confirmation small {
  color: #8a684b;
  font-size: 0.78rem;
}
.mygigs-email-confirmation button {
  width: auto;
  min-height: 2.25rem;
  margin: 0 0 0 auto;
  padding: 0.38rem 0.75rem;
  border-radius: 0.38rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.mygigs-hero {
  grid-template-columns: minmax(0, 1fr) 24rem;
  min-height: 12.5rem;
  margin: 0.5rem 0 0 !important;
  border-bottom: 1px solid #dce8f8 !important;
  background: linear-gradient(105deg, #f4f8ff 0%, #f8fbff 53%, #edf6ff 100%);
  overflow: hidden;
}
.mygigs-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 2.2rem 0 2rem 1.4rem;
}
.mygigs-hero h2 {
  margin: 0;
  font-size: clamp(3rem, 4.8vw, 4.25rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.96;
}
.mygigs-hero p {
  max-width: 39rem;
  margin: 0.65rem 0 0;
  color: #536b94;
  font-size: 1.1rem;
  line-height: 1.45;
}
.mygigs-hero-art {
  align-self: stretch;
  min-height: 12.5rem;
  margin: 0;
  aspect-ratio: auto;
}
.mygigs-hero-art picture,
.mygigs-hero-art img {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.mygigs-hero-art img {
  object-fit: cover;
  object-position: right bottom;
}

.mygigs-layout {
  grid-template-columns: minmax(0, 1fr) 19.25rem;
  gap: 1rem;
  margin-top: 1rem;
}
.mygigs-main {
  gap: 1rem;
}
.mygigs-stats {
  gap: 0.75rem;
}
.mygigs-stats a {
  min-height: 7.65rem;
  padding: 0.9rem;
  border-color: #dce8f8;
  border-radius: 0.7rem;
  box-shadow: none;
}
.mygigs-stats a:hover {
  border-color: #a9cbf6;
  background: #fbfdff;
}
.mygigs-stats small {
  color: #405779;
  font-size: 0.78rem;
}
.mygigs-stats strong {
  color: #091936;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}
.mygigs-stats span > span {
  margin-top: 0.12rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.stat-icon {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 0.65rem;
}
.mygigs-stats a > .icon {
  width: 1rem;
  height: 1rem;
}

.mygigs-table-card {
  padding: 0;
  overflow: hidden;
  border-color: #dce8f8;
  border-radius: 0.75rem;
  box-shadow: none;
}
.mygigs-table-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 4.55rem;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid #e1ebf7;
}
.mygigs-table-heading h3 {
  margin: 0;
  color: #0a1b3c;
  font-size: 1.15rem;
}
.mygigs-table-heading p {
  margin: 0.18rem 0 0;
  color: #6a7f9f;
  font-size: 0.8rem;
}
.mygigs-tabs {
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid #e1ebf7;
  background: #fbfdff;
}
.mygigs-tabs a {
  min-height: 2.25rem;
  padding: 0.38rem 0.72rem;
  border-color: #d7e4f5;
  border-radius: 0.42rem;
  font-size: 0.81rem;
}
.mygigs-tabs a[aria-current='page'] {
  box-shadow: none;
}
.mygigs-filters {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #e1ebf7;
  background: #fff;
}
.mygigs-filters .button-secondary {
  min-height: 2.5rem;
}
.mygigs-table {
  margin: 0 1.1rem;
  border-color: #dce8f8;
  border-radius: 0.58rem;
}
.mygigs-row {
  padding: 0.75rem 0.8rem;
  border-color: #e8eef7;
}
.mygigs-head {
  padding-block: 0.55rem;
  background: #f7faff;
}
.mygigs-table-card .browse-pagination {
  padding: 0.85rem 1.1rem 1rem;
}

.mygigs-sidebar {
  position: sticky;
  top: 4.5rem;
  gap: 0.85rem;
}
.quick-actions,
.mygigs-note {
  border-color: #dce8f8;
  border-radius: 0.7rem;
  box-shadow: none;
}
.quick-actions {
  gap: 0.5rem;
  padding: 1rem;
}
.quick-actions h3 {
  margin-bottom: 0.25rem;
  font-size: 1.05rem;
}
.quick-actions .button {
  min-height: 2.65rem;
}
.quick-link {
  min-height: 2.65rem;
  padding: 0.6rem 0.7rem;
  border-color: #d7e4f5;
  border-radius: 0.45rem;
  font-size: 0.84rem;
}
.mygigs-note {
  padding: 1rem;
}

@media (max-width: 1100px) {
  body > form.mygigs-email-confirmation {
    width: min(100% - 1.5rem, 760px);
  }
  .mygigs-hero {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
  .mygigs-layout {
    grid-template-columns: 1fr;
  }
  .mygigs-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  body > form.mygigs-email-confirmation {
    margin-top: 0.65rem;
    padding: 0.75rem;
  }
  .mygigs-email-confirmation p {
    align-items: flex-start;
  }
  .mygigs-email-confirmation button {
    width: 100%;
    margin: 0.3rem 0 0;
  }
  .mygigs-hero {
    display: block;
    min-height: 0;
    margin-top: 0 !important;
    background: transparent;
  }
  .mygigs-hero-copy {
    padding: 1.65rem 0.1rem 1.35rem;
  }
  .mygigs-hero h2 {
    font-size: 2.8rem;
  }
  .mygigs-hero p {
    font-size: 1rem;
  }
  .mygigs-hero-art {
    display: none;
  }
  .mygigs-stats {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .mygigs-stats a {
    min-height: 5.5rem;
  }
  .mygigs-table-heading {
    min-height: 0;
    padding: 0.9rem;
  }
  .mygigs-tabs {
    padding: 0.7rem 0.9rem;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .mygigs-tabs a {
    flex: 0 0 auto;
  }
  .mygigs-filters {
    padding: 0.8rem 0.9rem;
  }
  .mygigs-table {
    margin: 0 0.9rem;
  }
  .mygigs-table-card .browse-pagination {
    padding-inline: 0.9rem;
  }
  .mygigs-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Account and profile: true multi-view sections, following the gig control-center model. */
.page-account [data-account-view-panel][hidden],
.page-account [data-account-view-context][hidden],
.page-profile [data-profile-view-panel][hidden] {
  display: none !important;
}

.page-account .account-tabs,
.page-profile .profile-tabs {
  position: sticky;
  z-index: 50;
  top: 3.65rem;
  display: flex;
  gap: 0.18rem;
  align-items: stretch;
  margin: 0 0 1rem;
  padding: 0.35rem 0.45rem;
  overflow-x: auto;
  border: 1px solid #dce8f8;
  border-radius: 0.7rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 0.35rem 0.9rem rgb(27 67 119 / 5%);
  backdrop-filter: blur(9px);
  scrollbar-width: none;
}
.page-account .account-tabs::-webkit-scrollbar,
.page-profile .profile-tabs::-webkit-scrollbar {
  display: none;
}

.page-account .account-tabs button,
.page-profile .profile-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 0.42rem;
  color: #516783;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.page-account .account-tabs button:hover,
.page-profile .profile-tabs button:hover {
  color: #0877f9;
  background: #f4f8ff;
}
.page-account .account-tabs button[aria-selected='true'],
.page-profile .profile-tabs button[aria-selected='true'] {
  color: #d85e06;
  background: #fff1e4;
  box-shadow: inset 0 -2px 0 var(--orange);
}
.page-account .account-tabs button:focus-visible,
.page-profile .profile-tabs button:focus-visible {
  outline: 2px solid #0877f9;
  outline-offset: 2px;
}

.page-account .account-sidebar,
.page-profile .profile-sidebar {
  top: 5.25rem;
}
.page-account .account-main > [data-account-view-panel] {
  margin: 0;
}
.page-profile .profile-main > [data-profile-view-panel] {
  margin: 0;
}
.page-profile .profile-work-record-panel {
  margin: 0;
  padding: 1.2rem;
  border-top: 1px solid var(--line);
}
.page-profile .profile-work-record-panel .ui-section-heading {
  margin-bottom: 0.8rem;
}
.page-profile .profile-overview {
  min-height: 14rem;
}
.page-profile .profile-reviews {
  min-height: 14rem;
}

@media (max-width: 899px) {
  .page-account .account-sidebar,
  .page-profile .profile-sidebar {
    top: auto;
  }
}
@media (max-width: 699px) {
  .page-account .account-tabs,
  .page-profile .profile-tabs {
    top: 3.9rem;
    margin-bottom: 0.8rem;
    padding: 0.3rem;
    border-radius: 0.58rem;
  }
  .page-account .account-tabs button,
  .page-profile .profile-tabs button {
    min-height: 2.2rem;
    padding-inline: 0.68rem;
    font-size: 0.8rem;
  }
  .page-profile .profile-work-record-panel {
    padding: 1rem;
  }
}

/* Admin dashboard: one card per area, with its count; cards needing action get an orange edge. */
.admin-dashboard {
  max-width: 960px;
}
.admin-alerts {
  margin-bottom: 1rem;
  border-color: var(--danger);
  border-left-width: 4px;
}
.admin-alerts ul {
  margin: 0.6rem 0;
  padding-left: 1.1rem;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}
.admin-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--ink);
  text-decoration: none;
}
.admin-tile:hover,
.admin-tile:focus-visible {
  border-color: var(--line-dark);
}
.admin-tile span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.admin-tile strong {
  font-size: var(--text-xl);
  line-height: 1.2;
}
.admin-tile small {
  color: var(--muted);
}
.admin-tile.is-attention {
  border-left: 4px solid var(--orange);
}
.admin-tile.is-attention strong {
  color: var(--danger);
}
.admin-note {
  margin-top: 1rem;
  color: var(--muted);
}

/* Log in, sign up and account recovery: the form first, with a smaller illustration and the
   notes beside it; on a phone, the form at the top and no illustration. */
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-page, .recovery-page) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  grid-template-areas: 'copy art' 'main art' 'main side';
  grid-template-rows: auto auto 1fr;
  gap: 0 2.5rem;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-hero, .auth-layout, .recovery-hero, .recovery-layout) {
  display: contents;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-hero-copy, .recovery-hero-copy) {
  grid-area: copy;
  padding: 1.5rem 0 1rem;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-hero-copy, .recovery-hero-copy)
  h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-hero-art, .recovery-hero-art) {
  grid-area: art;
  position: static;
  align-self: start;
  height: auto;
  margin-top: 1.5rem;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-hero-art, .recovery-hero-art)
  img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-form-card, .recovery-main-card) {
  grid-area: main;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-sidebar, .recovery-sidebar) {
  grid-area: side;
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  .auth-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  .auth-points
  span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
/* Lists: the icon or step number beside its text, no bullets or doubled numbers. */
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-principles ul, .recovery-steps-card ol) {
  display: grid;
  gap: 0.85rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-principles li, .recovery-steps-card li, .auth-security-note, .recovery-safe-card) {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-principles li, .recovery-steps-card li, .auth-security-note, .recovery-safe-card)
  p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  .recovery-steps-card
  li
  > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: var(--text-sm);
  font-weight: 800;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  .recovery-confirm-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--text-sm);
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  .auth-error {
  margin: 0.5rem 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  background: #fdf0ee;
  color: var(--danger);
  font-weight: 700;
}
@media (max-width: 800px) {
  :is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
    :is(.auth-page, .recovery-page) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'copy' 'main' 'side';
    grid-template-rows: auto;
  }
  :is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
    :is(.auth-hero-art, .recovery-hero-art) {
    display: none;
  }
}

:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.recovery-info-note, .recovery-expiry-note) {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  margin-top: 1rem;
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.recovery-info-note, .recovery-expiry-note)
  p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
:is(.page-login, .page-register, .page-forgotPassword, .page-resetPassword, .page-message)
  :is(.auth-sidebar, .recovery-sidebar)
  .ui-section-heading {
  font-size: var(--text-lg);
}

/* Any other message or error: a plain card with a way on. */
.message-page {
  max-width: 640px;
  margin: 2rem auto;
}
.message-card h2 {
  margin: 0 0 0.5rem;
}
.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* Gig chat: who the private conversation is with, and the client's other conversations. */
:is(.thread-privacy, .thread-switch, .thread-readonly) {
  margin: 0.25rem 0 0.75rem;
  color: var(--muted);
}
.thread-switch a {
  font-weight: 700;
}

/* Non-blocking confirmation for progressively enhanced Gig Control actions. */
.async-announcement {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
}
.async-announcement[data-error='true'] {
  border-left-color: #c83232;
  color: #9e2020;
}

/* React marketplace controls use semantic buttons while preserving the Eta browse surface. */
.page-gigs .browse-sort-tabs button,
.page-gigs .browse-pagination button,
.page-gigs .filter-heading button,
.page-gigs .browse-empty button {
  width: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.page-gigs .browse-sort-tabs button {
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  color: #536c95;
  font-size: 0.77rem;
  white-space: nowrap;
}
.page-gigs .browse-sort-tabs button.is-active {
  color: #086bef;
  background: #edf5ff;
  box-shadow: inset 0 -2px #0877f9;
}
.page-gigs .filter-heading button {
  padding: 0;
  color: #0877f9;
  font-size: 0.76rem;
}
.page-gigs .browse-pagination button {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border: 1px solid #cfe0f5;
  border-radius: 0.4rem;
  background: #fff;
  color: #0877f9;
  font-size: 0.78rem;
  font-weight: 700;
}
.page-gigs .browse-pagination button:hover,
.page-gigs .browse-pagination button:focus-visible {
  border-color: #0877f9;
  background: #edf5ff;
}
.page-gigs .browse-pagination button svg {
  width: 0.9rem;
  height: 0.9rem;
}
.page-gigs .browse-empty button {
  padding: 0;
  color: #0877f9;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
}

/* React notification controls preserve the original navigation styling with semantic buttons. */
.page-notifications .notifications-tabs button {
  width: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.page-notifications .notifications-tabs button[aria-current='page'] {
  color: #e96508;
  background: #fff1e4;
  box-shadow: inset 0 -2px #ff7a16;
}
.page-notifications .notifications-empty button {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0877f9;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Keep the Bitcoin glyph legible inside the orange My Gigs escrow summary. */
.mygigs-stats .stat-icon.is-bitcoin .icon,
.mygigs-stats .stat-icon.is-bitcoin .icon * {
  color: #fff;
  stroke: #fff;
}

/* React icons are wrapped for safe SVG injection; keep Quick actions on the Eta three-column rhythm. */
.quick-link > span[aria-hidden='true'] {
  display: inline-flex;
  flex: 0 0 1.1rem;
  align-items: center;
  justify-content: center;
}
.quick-link > span:not([aria-hidden='true']) {
  flex: 1 1 auto;
  min-width: 0;
}
.quick-link > span[aria-hidden='true'] .icon {
  width: 1rem;
  height: 1rem;
}
.quick-link > span:first-child[aria-hidden='true'] .icon {
  color: #1469dc;
}
.quick-link > span:last-child[aria-hidden='true'] .icon {
  color: #8a9ab5;
}

/* My Gigs has six cells in both its heading and its data rows. */
.mygigs-row {
  grid-template-columns: minmax(16rem, 2.6fr) minmax(4.5rem, 0.8fr) minmax(6.5rem, 1fr) minmax(
      8rem,
      1.15fr
    ) minmax(6rem, 0.85fr) auto;
}
.mygigs-row > span {
  min-width: 0;
}
.mygigs-head > span,
.mygigs-role,
.mygigs-date,
.mygigs-actions {
  white-space: nowrap;
}

/* The table heading must use the exact same six-track grid as every gig row. */
.mygigs-row.mygigs-head {
  grid-template-columns: minmax(16rem, 2.6fr) minmax(4.5rem, 0.8fr) minmax(6.5rem, 1fr) minmax(
      8rem,
      1.15fr
    ) minmax(6rem, 0.85fr) auto !important;
}

/* React notification inbox: bounded read history, permanent unread work queue. */
.notifications-inbox-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 47rem;
  color: #5c7396;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.notifications-inbox-note .icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  color: #1469dc;
}
.notifications-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid #e7eef8;
}
.notifications-pagination > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.notifications-pagination button {
  min-width: 2.25rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #d5e3f5;
  border-radius: 0.45rem;
  color: #47648c;
  background: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.notifications-pagination button:hover:not(:disabled),
.notifications-pagination button[aria-current='page'] {
  border-color: #176ee5;
  color: #fff;
  background: #176ee5;
}
.notifications-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.notifications-pagination i {
  color: #7790ae;
  font-style: normal;
}

/* Four factual stages for posting/editing; controls remain native form elements. */
.post-gig-hero .post-gig-art picture,
.post-gig-hero .post-gig-art img {
  display: block;
  width: 100%;
  height: 100%;
}
.post-gig-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.post-gig-steps li {
  min-width: 0;
  padding: 0 0.55rem;
}
.post-gig-steps li:first-child {
  padding-left: 0;
}
.post-gig-steps li > button {
  display: flex;
  width: 100%;
  gap: 0.6rem;
  align-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.post-gig-steps li > button:disabled {
  cursor: default;
}
.post-gig-steps li > button > span {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #cbd9ed;
  border-radius: 50%;
  color: #66809e;
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 750;
}
.post-gig-steps li.is-current > button > span {
  border-color: #176ee5;
  color: #fff;
  background: #176ee5;
  box-shadow: 0 4px 9px rgb(23 110 229 / 20%);
}
.post-gig-steps li.is-complete > button > span {
  border-color: #bce7cf;
  color: #147347;
  background: #eaf8f0;
}
.post-gig-steps li > button:focus-visible {
  outline: 2px solid #176ee5;
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}
.post-section-copy {
  margin: 0.15rem 0 1.15rem;
  color: #667b9a;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.post-wizard-panel[hidden] {
  display: none;
}
.post-review-panel {
  min-height: 25rem;
}
.post-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.15rem 0;
  border: 1px solid #dfe9f5;
  border-radius: 0.5rem;
  overflow: hidden;
}
.post-review-list > div {
  min-height: 5rem;
  padding: 0.85rem 0.95rem;
  border-right: 1px solid #dfe9f5;
  border-bottom: 1px solid #dfe9f5;
}
.post-review-list > div:nth-child(even) {
  border-right: 0;
}
.post-review-list > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.post-review-list dt {
  margin-bottom: 0.35rem;
  color: #7185a2;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.post-review-list dd {
  margin: 0;
  color: #19345c;
  font-size: var(--text-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
@media (max-width: 699px) {
  .notifications-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .notifications-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }
  .post-gig-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
  }
  .post-gig-steps li,
  .post-gig-steps li:first-child {
    padding: 0;
  }
  .post-gig-steps li > button {
    justify-content: center;
  }
  .post-gig-steps li > button > div {
    display: none;
  }
  .post-review-list {
    grid-template-columns: 1fr;
  }
  .post-review-list > div,
  .post-review-list > div:nth-child(even) {
    border-right: 0;
    border-bottom: 1px solid #dfe9f5;
  }
  .post-review-list > div:last-child {
    border-bottom: 0;
  }
}

.notifications-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.4rem 0.78rem;
  border: 1px solid #d5e3f5;
  border-radius: 0.45rem;
  color: #435f89;
  background: #fff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.notifications-tabs button[aria-current='page'] {
  border-color: #ffd0aa;
  color: #d85e06;
  background: #fff1e4;
}
.notifications-tabs button:hover {
  border-color: #9fc7fb;
  color: #0877f9;
}

/* Post-a-gig polish: one clear action bar and a quieter, technical agreement sidebar. */
.post-preview {
  overflow: hidden;
  border-color: #d7e4f4;
  background: #fff;
}
.post-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.05rem 0.9rem;
  border-bottom: 1px solid #e3ebf6;
}
.post-preview-heading span {
  display: block;
  margin-bottom: 0.2rem;
  color: #6d83a3;
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.post-preview-heading h3 {
  margin: 0;
  color: #0a1a3d;
  font-size: var(--text-md);
}
.post-preview-heading b {
  padding: 0.3rem 0.55rem;
  border: 1px solid #dce8f8;
  border-radius: 999px;
  color: #4c6689;
  background: #f7faff;
  font-size: var(--text-xs);
}
.post-preview .post-preview-paper {
  padding: 1.1rem 1.05rem 1.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.post-preview-paper > strong {
  max-width: none;
  color: #0a1a3d;
  font-size: 1.08rem;
}
.post-preview-sats {
  margin-top: 0.4rem;
  color: #d85e06;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-sm);
}
.post-preview-paper > p {
  min-height: 3.9rem;
  margin: 0.85rem 0;
}
.post-preview-paper dl {
  margin-top: 1.1rem;
}
.post-escrow-card {
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.05rem;
  border-top: 3px solid #ff7417;
  background: #f8fbff;
}
.post-escrow-card > span {
  width: 2.35rem;
  height: 2.35rem;
  color: #fff;
  background: #ff7417;
  box-shadow: none;
}
.post-escrow-card .ui-section-heading {
  margin: 0.05rem 0 0;
}
.post-escrow-card p {
  margin-top: 0.4rem;
  color: #5e7698;
}
.post-escrow-card p strong {
  color: #1c3963;
}
.post-form-actions {
  justify-content: space-between;
  align-items: center;
  min-height: 5.2rem;
  margin: 0;
  padding: 0.9rem 1.35rem;
  border-top: 1px solid #e0eaf6;
  background: #fbfdff;
}
.post-action-context {
  display: grid;
  gap: 0.16rem;
}
.post-action-context span {
  color: #6e83a2;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.post-action-context strong {
  color: #1a3159;
  font-size: var(--text-sm);
}
.post-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.post-form-actions .post-next-button {
  min-width: 12.5rem;
  border-color: #ff7417;
  color: #fff;
  background: #ff7417;
  box-shadow: 0 0.35rem 0.8rem rgb(232 99 16 / 18%);
}
.post-form-actions .post-next-button:hover {
  border-color: #e65e0b;
  background: #e65e0b;
}
@media (max-width: 699px) {
  .post-form-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }
  .post-action-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }
  .post-form-actions .button,
  .post-form-actions button,
  .post-form-actions .post-next-button {
    width: 100%;
    min-width: 0;
  }
}

/* Wallet follows the account control-center pattern: one purpose per view. */
.page-wallet .wallet-view-panel[hidden] {
  display: none !important;
}
.page-wallet .wallet-tabs {
  position: sticky;
  z-index: 50;
  top: 3.65rem;
  display: flex;
  gap: 0.18rem;
  align-items: stretch;
  margin: 0 0 1rem;
  padding: 0.35rem 0.45rem;
  overflow-x: auto;
  border: 1px solid #dce8f8;
  border-radius: 0.7rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 0.35rem 0.9rem rgb(27 67 119 / 5%);
  backdrop-filter: blur(9px);
  scrollbar-width: none;
}
.page-wallet .wallet-tabs::-webkit-scrollbar {
  display: none;
}
.page-wallet .wallet-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 0.42rem;
  color: #516783;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.page-wallet .wallet-tabs button:hover {
  color: #0877f9;
  background: #f4f8ff;
}
.page-wallet .wallet-tabs button[aria-selected='true'] {
  color: #d85e06;
  background: #fff1e4;
  box-shadow: inset 0 -2px 0 var(--orange);
}
.page-wallet .wallet-tabs button:focus-visible {
  outline: 2px solid #0877f9;
  outline-offset: 2px;
}
.wallet-view-layout .wallet-main,
.wallet-view-layout .wallet-sidebar {
  min-width: 0;
}
.wallet-view-stack {
  display: grid;
  gap: 1rem;
}
.wallet-view-layout .wallet-sidebar {
  top: 5.25rem;
}
.wallet-key-mark {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
}
.wallet-key-mark .icon {
  width: 1.15rem;
  height: 1.15rem;
}
.wallet-key-card .wallet-section-heading > div > p {
  max-width: 44rem;
  margin: 0.4rem 0 0;
  color: #5c7396;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.wallet-empty-view {
  padding: 1.35rem;
}
.wallet-empty-view p {
  max-width: 58ch;
  margin: 0.45rem 0 0;
  color: #5c7396;
  line-height: 1.5;
}
.wallet-recovery-guide ul {
  display: grid;
  gap: 0.55rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.wallet-recovery-guide li {
  position: relative;
  padding-left: 1.1rem;
  color: #5c7396;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.wallet-recovery-guide li::before {
  position: absolute;
  left: 0;
  color: #176ee5;
  content: '>';
  font-weight: 800;
}
@media (max-width: 699px) {
  .page-wallet .wallet-tabs {
    top: 3.9rem;
    margin-bottom: 0.8rem;
    padding: 0.3rem;
  }
  .page-wallet .wallet-tabs button {
    min-height: 2.2rem;
    padding-inline: 0.68rem;
  }
}

/* Header and footer refinement: one clear account entry, restrained navigation feedback. */
body > header .nav-primary a:hover,
body > header .nav-primary a:first-child:hover {
  color: #1469dc;
  background: #f4f8ff;
  box-shadow: inset 0 -2px 0 #b8d8ff;
}
body > header .nav-primary a:focus-visible,
body > header .nav-avatar:focus-visible {
  outline: 2px solid #0877f9;
  outline-offset: -3px;
}
body > header .nav-avatar[aria-current='page'] {
  color: #1469dc;
  background: #f4f8ff;
  box-shadow: inset 0 -2px 0 #1469dc;
}

.site-footer {
  border-top: 1px solid #dbe6f3;
  background: #f8fbff;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1fr) minmax(15rem, 0.8fr);
  gap: 2rem;
  align-items: center;
  width: min(var(--page-width), calc(100% - 3rem));
  padding: 1.65rem 0;
}
.footer-identity {
  display: grid;
  gap: 0.35rem;
}
.footer-identity > p {
  margin: 0;
  color: #657a99;
  font-size: var(--text-xs);
  line-height: 1.45;
}
.site-footer .footer-links {
  justify-content: center;
  gap: 0.45rem 1.25rem;
}
.site-footer .footer-links a {
  min-height: 2rem;
  padding: 0.35rem 0.15rem;
  color: #476181;
  font-size: var(--text-sm);
  font-weight: 650;
}
.site-footer .footer-links a:hover {
  color: #0b66d3;
}
.footer-protocol {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding-left: 1.25rem;
  border-left: 1px solid #dce7f3;
}
.footer-protocol > .icon {
  width: 1.45rem;
  height: 1.45rem;
  color: #176ee5;
}
.footer-protocol strong,
.footer-protocol span {
  display: block;
}
.footer-protocol strong {
  color: #1d365d;
  font-size: var(--text-sm);
}
.footer-protocol span {
  margin-top: 0.12rem;
  color: #6a809e;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.site-footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(var(--page-width), calc(100% - 3rem));
  margin: 0 auto;
  padding: 0.8rem 0 1rem;
  border-top: 1px solid #dfe8f4;
  color: #778ba6;
  font-size: var(--text-xs);
}
@media (max-width: 899px) {
  .site-footer-inner {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
  }
  .footer-protocol {
    grid-column: 1 / -1;
    padding: 0.9rem 0 0;
    border-top: 1px solid #dce7f3;
    border-left: 0;
  }
}
@media (max-width: 699px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: calc(100% - 2rem);
    padding: 1.35rem 0;
  }
  .site-footer .footer-links {
    justify-content: flex-start;
  }
  .footer-protocol {
    grid-column: auto;
  }
  .site-footer-legal {
    flex-direction: column;
    width: calc(100% - 2rem);
    gap: 0.35rem;
  }
}

/* Editable public profile and continuous public portfolio */
.account-public-profile-card .account-section-heading > div > p {
  max-width: 46rem;
  margin: 0.42rem 0 0;
  color: #587096;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.account-public-profile-form {
  display: grid;
  gap: 1.15rem;
}
.account-public-profile-fields {
  display: grid;
  gap: 0.9rem;
}
.account-public-profile-fields p {
  margin: 0;
}
.account-public-profile-fields label,
.account-portfolio-project label {
  display: grid;
  gap: 0.4rem;
  color: #162c55;
  font-size: var(--text-sm);
  font-weight: 750;
}
.account-public-profile-fields input,
.account-public-profile-fields textarea,
.account-portfolio-project input,
.account-portfolio-project textarea {
  width: 100%;
}
.account-public-profile-fields small,
.account-portfolio-project label > span {
  color: #7186a6;
  font-size: var(--text-xs);
  font-weight: 500;
}
.account-profile-about textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.account-portfolio-editor {
  padding: 1rem;
  border: 1px solid #dce8f7;
  border-radius: 0.68rem;
  background: #fbfdff;
}
.account-portfolio-editor-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.account-portfolio-editor-heading h4 {
  margin: 0;
  color: #10234a;
  font-size: var(--text-base);
}
.account-portfolio-editor-heading p {
  max-width: 42rem;
  margin: 0.25rem 0 0;
  color: #607896;
  font-size: var(--text-sm);
  line-height: 1.42;
}
.account-portfolio-editor-heading .button {
  flex: 0 0 auto;
}
.account-portfolio-empty {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px dashed #c9d9ee;
  border-radius: 0.5rem;
  color: #6c82a1;
  font-size: var(--text-sm);
}
.account-portfolio-empty strong {
  color: #18325c;
}
.account-portfolio-projects {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.95rem;
}
.account-portfolio-project {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid #dce7f5;
  border-radius: 0.56rem;
  background: #fff;
}
.account-portfolio-project legend {
  padding: 0 0.25rem;
  color: #526a8c;
  font-size: var(--text-xs);
  font-weight: 800;
}
.account-portfolio-remove {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  min-height: auto;
  padding: 0.2rem 0.3rem;
  border: 0;
  color: #b74a34;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 750;
  cursor: pointer;
}
.account-portfolio-remove:hover {
  color: #8f3322;
  text-decoration: underline;
}
.account-portfolio-project-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.7rem;
}
.account-portfolio-description {
  grid-column: 1 / -1;
}
.account-public-profile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
}
.account-public-profile-actions p {
  flex: 1;
  margin: 0;
  color: #b14a31;
  font-size: var(--text-sm);
}
.account-public-profile-actions p:empty {
  display: none;
}
.account-public-profile-actions p.is-success {
  color: #25834c;
}
.account-public-profile-actions button {
  flex: 0 0 auto;
}
.profile-continuous-layout .profile-main {
  display: grid;
  gap: 1rem;
}
.profile-continuous-layout .profile-sidebar {
  gap: 1rem;
}
.profile-continuous-layout .profile-work-record,
.profile-continuous-layout .profile-reviews {
  margin-top: 0;
}
.profile-skills-section,
.profile-portfolio-section,
.profile-privacy-note {
  padding: 1.15rem;
}
.profile-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}
.profile-skill-list li {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  color: #245183;
  background: #eaf3ff;
  font-size: var(--text-sm);
  font-weight: 700;
}
.profile-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.9rem;
}
.profile-project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce7f5;
  border-radius: 0.62rem;
  background: #fff;
}
.profile-project-card > img,
.profile-project-placeholder {
  display: block;
  width: 100%;
  height: 10.5rem;
  object-fit: cover;
  background: linear-gradient(135deg, #eaf5ff, #dfeeff);
}
.profile-project-placeholder {
  display: grid;
  place-items: center;
  color: #2875d9;
}
.profile-project-placeholder span {
  font-size: 2.4rem;
  font-weight: 850;
}
.profile-project-copy {
  padding: 0.85rem;
}
.profile-project-copy h4 {
  margin: 0;
  color: #10234a;
  font-size: var(--text-base);
}
.profile-project-copy p {
  margin: 0.32rem 0 0;
  color: #5d7595;
  font-size: var(--text-sm);
  line-height: 1.42;
}
.profile-project-copy a {
  display: inline-flex;
  margin-top: 0.65rem;
  color: #0877f9;
  font-size: var(--text-sm);
  font-weight: 750;
  text-decoration: none;
}
.profile-project-copy a:hover {
  text-decoration: underline;
}
.profile-privacy-note p {
  margin: 0.55rem 0 0;
  color: #617897;
  font-size: var(--text-sm);
  line-height: 1.45;
}
@media (max-width: 699px) {
  .account-section-heading {
    flex-direction: column;
  }
  .account-portfolio-editor-heading {
    flex-direction: column;
  }
  .account-portfolio-project-fields,
  .profile-portfolio-grid {
    grid-template-columns: 1fr;
  }
  .account-public-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .account-public-profile-actions button {
    width: 100%;
  }
}

/* Account is a settings page: its navigation and supporting cards scroll with the page.
   Keeping either sticky made the first card slide underneath the fixed app header. */
.page-account main {
  padding-top: 1rem;
}
.page-account .account-tabs,
.page-account .account-sidebar {
  position: static;
  top: auto;
}

/* Mirror My gigs' safe header gap, while allowing Account's view tabs to remain pinned. */
@media (min-width: 900px) {
  .page-account .account-tabs {
    position: sticky;
    z-index: 50;
    top: 4.5rem;
  }
  .page-account .account-sidebar {
    position: sticky;
    top: 8.25rem;
  }
}


/* Payment-key onboarding: a dedicated, optional setup step after email verification. */
.page-paymentKeySetup main {
  width: min(1040px, calc(100% - 3rem));
  padding-top: 0;
}
.payment-key-setup-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  grid-template-areas: "copy art" "main side";
  grid-template-rows: auto 1fr;
  gap: 0 2.5rem;
  align-items: start;
  padding-bottom: 3rem;
}
.payment-key-setup-copy {
  grid-area: copy;
  padding: 1.5rem 0 1rem;
}
.payment-key-setup-kicker {
  margin: 0 0 0.35rem;
  color: var(--orange);
  font-size: var(--text-sm);
  font-weight: 800;
}
.payment-key-setup-copy h2 {
  max-width: 12ch;
  margin: 0 0 0.4rem;
  font-size: clamp(2rem, 4vw, 2.65rem);
  letter-spacing: -0.06em;
}
.payment-key-setup-copy h2 em {
  color: var(--orange);
  font-style: normal;
}
.payment-key-setup-copy > p:last-child {
  max-width: 37rem;
  margin: 0;
  color: #566b90;
  font-size: var(--text-lg);
  line-height: 1.35;
}
.payment-key-setup-art {
  grid-area: art;
  align-self: start;
  margin-top: 1.25rem;
}
.payment-key-setup-art img {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.payment-key-setup-card {
  grid-area: main;
  min-height: 32rem;
  padding: 1.65rem 1.9rem;
  border-radius: 8px;
  box-shadow: none;
}
.payment-key-card-heading {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.payment-key-card-heading > span,
.payment-key-ready-icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.25rem;
}
.payment-key-card-heading .ui-section-heading {
  margin: 0;
  font-size: var(--text-xl);
}
.payment-key-card-heading p {
  margin: 0.2rem 0 0;
  color: #607595;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.payment-key-setup-card form {
  max-width: none;
  margin: 1.15rem 0 0;
}
.payment-key-setup-card form p {
  max-width: none;
}
.payment-key-setup-card fieldset {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.payment-key-setup-card legend {
  padding: 0 0.35rem;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 750;
}
.payment-key-setup-card label {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.payment-key-setup-card input,
.payment-key-setup-card textarea {
  width: 100%;
  margin-top: 0.32rem;
}
.payment-key-setup-card input[type="radio"] {
  width: auto;
  margin: 0 0.35rem 0 0;
}
.payment-key-setup-card fieldset label {
  margin-right: 0.8rem;
}
.payment-key-setup-card textarea {
  resize: vertical;
}
.payment-key-setup-card small {
  display: block;
  margin-top: 0.25rem;
  color: #6c7f9f;
  font-size: var(--text-xs);
  font-weight: 500;
}
.payment-key-setup-card [data-mnemonic-recovery] {
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid #e9bc74;
  border-radius: 6px;
  background: #fffaf0;
}
.payment-key-setup-card [data-mnemonic-words] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  font-weight: 700;
}
.payment-key-setup-card [data-escrow-status] {
  min-height: 1.3rem;
  color: #587096;
  font-size: var(--text-sm);
}
.payment-key-setup-card [data-escrow-status][data-error="true"] {
  color: var(--danger);
  font-weight: 700;
}
.payment-key-defer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  color: #176ee5;
  font-size: var(--text-sm);
  font-weight: 750;
}
.payment-key-defer a {
  color: inherit;
  text-decoration: none;
}
.payment-key-defer a:hover {
  text-decoration: underline;
}
.payment-key-setup-sidebar {
  grid-area: side;
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.payment-key-setup-sidebar .ui-card {
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: none;
}
.payment-key-steps .ui-section-heading {
  margin: 0;
  font-size: var(--text-lg);
}
.payment-key-steps ol {
  display: grid;
  gap: 0.95rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.payment-key-steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.65rem;
}
.payment-key-steps li > span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: var(--text-sm);
  font-weight: 800;
}
.payment-key-steps strong {
  display: block;
  font-size: var(--text-sm);
}
.payment-key-steps p {
  margin: 0.18rem 0 0;
  color: #617697;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.payment-key-safety {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  background: #fbfdff;
}
.payment-key-safety > span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  color: #176ee5;
  background: #eaf3ff;
  font-size: 1.2rem;
}
.payment-key-safety .ui-section-heading {
  margin: 0;
  font-size: var(--text-md);
}
.payment-key-safety p {
  margin: 0.22rem 0 0;
  color: #5f7496;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.payment-key-ready {
  display: flex;
  min-height: 27rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.payment-key-ready-icon {
  width: 4.7rem;
  height: 4.7rem;
  margin-bottom: 1rem;
  color: #218447;
  background: #e5f8eb;
  font-size: 2rem;
}
.payment-key-ready .ui-section-heading {
  margin: 0;
  font-size: var(--text-2xl);
}
.payment-key-ready > p {
  max-width: 32rem;
  margin: 0.55rem auto 1.2rem;
  color: #5d7294;
  line-height: 1.45;
}
.payment-key-ready-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}
.payment-key-ready-actions .button {
  min-height: 2.7rem;
}
@media (max-width: 800px) {
  .payment-key-setup-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "main" "side";
    gap: 0;
  }
  .payment-key-setup-art {
    display: none;
  }
  .payment-key-setup-card {
    min-height: 0;
  }
}
@media (max-width: 699px) {
  .page-paymentKeySetup main {
    width: min(100% - 1.5rem, 760px);
  }
  .payment-key-setup-copy {
    padding: 1.35rem 0 1rem;
  }
  .payment-key-setup-copy h2 {
    font-size: 2.3rem;
  }
  .payment-key-setup-copy > p:last-child {
    font-size: var(--text-md);
  }
  .payment-key-setup-card,
  .payment-key-setup-sidebar .ui-card {
    padding: 1.1rem;
  }
  .payment-key-setup-card [data-mnemonic-words] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-key-ready {
    min-height: 22rem;
  }
}

.payment-key-autogenerate-note {
  margin: 1rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #cfe0fa;
  border-left: 3px solid #176ee5;
  border-radius: 6px;
  color: #587096;
  background: #f7fbff;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.wallet-setup-card .payment-key-autogenerate-note {
  max-width: 48rem;
}