/* TSUNAGU production integration: one clear, accessible product language. */
:root {
  --tsg-gold: #f3c64e;
  --tsg-gold-strong: #ffdb79;
  --tsg-ink: #151106;
  --tsg-background: #08090b;
  --tsg-surface: #111318;
  --tsg-surface-raised: #161920;
  --tsg-border: #373c45;
  --tsg-copy: #f6f7fa;
  --tsg-muted: #c2c7d0;
  --tsg-success: #71dfa6;
  --tsg-danger: #ff9aa3;
  --tsg-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

/* Login verification feedback must remain readable and visibly busy on mobile. */
.login .status {
  font-size: 15px;
  line-height: 1.55;
}

.login .login-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.stripe-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid #6f571d;
  border-radius: 999px;
  color: #f4d267;
  font-size: 12px;
  font-weight: 800;
}

.stripe-pill[data-connected="true"] {
  border-color: #267b50;
  color: #79e6a5;
}

.stripe-pill.tsg-discreet-status {
  min-height: 22px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  color: #aeb4be;
  font-size: 11px;
  font-weight: 500;
}

.stripe-pill.tsg-discreet-status[data-connected="true"] { color: #79e6a5; }

.tsg-legal section {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #343840;
  border-radius: 16px;
  background: #101216;
}

.tsg-legal section h2 { margin: 0 0 12px; color: #f0ce66; font-size: 18px; line-height: 1.6; }
.tsg-legal section p { margin: 8px 0; color: #e0e2e6; font-size: 15px; line-height: 1.9; }
.tsg-legal section p a { color: #f0ce66; text-decoration: underline; }
.tsg-legal section.tsg-legal-alert { border-color: #79621e; background: #17140c; }
.tsg-legal section.tsg-legal-alert > b { color: #ffdc79; }

.stripe-feedback {
  min-height: 24px;
  margin: 14px 0;
  color: #d0d0d0;
  font-size: 15px;
  line-height: 1.6;
}

.stripe-feedback.error { color: #ff8794; }
.stripe-feedback.ok { color: #7be2aa; }

.tsg-payout-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 17px;
  border: 1px solid #6f581b;
  border-radius: 17px;
  background: linear-gradient(120deg, #19150c, #111216);
}

.tsg-payout-card__copy b,
.tsg-payout-card__copy small {
  display: block;
}

.tsg-payout-card__copy b { font-size: 16px; }
.tsg-payout-card__copy small { margin-top: 5px; color: #c2c3c8; font-size: 13px; }
.tsg-payout-card__new { color: #f1ca52; font-size: 13px; font-weight: 900; white-space: nowrap; }
.tsg-payout-card__ready { color: #75dda1; font-size: 13px; font-weight: 900; white-space: nowrap; }

html[data-text-size="standard"] { --tsg-scale: 1; }
html[data-text-size="large"] { --tsg-scale: 1.125; }
html[data-text-size="xlarge"] { --tsg-scale: 1.25; }

body.tsg-integrated {
  color: var(--tsg-copy);
  font-size: calc(16px * var(--tsg-scale, 1.125));
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.tsg-integrated :is(button, input, textarea, select) {
  font-family: inherit;
}

body.tsg-integrated :is(button, [role="button"], .tg-primary, .tg-secondary) {
  min-height: 48px;
}

body.tsg-integrated :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--tsg-gold-strong);
  outline-offset: 3px;
}

body.tsg-integrated :is(.muted, .sub, .meta, .tg-sub, .note, .helper, .date,
  .loc, .status-copy small, .notice small, .chat small, .tg-item-copy small,
  .tg-contract-grid small, .tg-kicker, .tg-candidate-info p) {
  color: var(--tsg-muted) !important;
}

html[data-contrast="high"] body.tsg-integrated :is(.muted, .sub, .meta,
  .tg-sub, .note, .helper, .date, .loc, small) {
  color: #d9dde4;
}

body.tsg-integrated :is(.top, .tg-topbar, header) {
  border-color: rgba(230, 190, 96, .19);
}

.tsg-official-brand {
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--tsg-gold) !important;
  text-decoration: none;
}

.tsg-official-brand > img,
.tsg-official-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
}

.tsg-official-brand :is(b, strong) {
  color: var(--tsg-gold) !important;
  letter-spacing: .02em;
}

.tsg-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.tsg-text-control {
  min-height: 42px !important;
  padding: 0 10px;
  border: 1px solid #786027;
  border-radius: 999px;
  background: #17130a;
  color: var(--tsg-gold-strong);
  font-size: 12px !important;
  font-weight: 850;
  white-space: nowrap;
}

body.tsg-integrated nav.tsg-main-nav {
  position: fixed !important;
  z-index: 80 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: min(100%, 680px) !important;
  min-height: calc(87px + var(--tsg-bottom)) !important;
  padding: 6px 5px calc(7px + var(--tsg-bottom)) !important;
  transform: translateX(-50%) !important;
  border-top: 1px solid #434044 !important;
  background: rgba(11, 12, 15, .985) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  backdrop-filter: blur(14px);
}

body.tsg-integrated nav.tsg-main-nav > a {
  min-width: 0 !important;
  position: relative !important;
  min-height: 72px !important;
  padding: 5px 2px 4px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #d0d2d9 !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body.tsg-integrated nav.tsg-main-nav > a i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 20px !important;
  font-style: normal;
  line-height: 24px;
}

body.tsg-integrated nav.tsg-main-nav > a .tsg-nav-icon svg {
  display: block;
  width: 23px;
  height: 23px;
}

body.tsg-integrated nav.tsg-main-nav > a .tsg-nav-label {
  font-size: inherit;
  line-height: 1.12;
}

body.tsg-integrated nav.tsg-main-nav > a .tsg-nav-hint {
  color: #b8bbc5;
  font-size: clamp(8px, 2.1vw, 10px);
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

body.tsg-integrated nav.tsg-main-nav > a.active {
  background: linear-gradient(160deg, rgba(120, 92, 30, .28), rgba(53, 43, 20, .22)) !important;
  color: var(--tsg-gold-strong) !important;
  font-weight: 900 !important;
}

body.tsg-integrated nav.tsg-main-nav > a.active::after {
  position: absolute;
  top: -6px;
  left: 50%;
  display: block !important;
  width: 35px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 0 0 4px 4px;
  background: var(--tsg-gold);
  content: "";
}

body.tsg-integrated nav.tsg-main-nav > a.active .tsg-nav-hint {
  color: #f4da9a;
}

body.tsg-integrated:has(nav.tsg-main-nav) :is(.app, .tg-app, main:not(.tg-chat-page)) {
  padding-bottom: max(117px, calc(100px + var(--tsg-bottom)));
}

body.tsg-integrated:has(nav.tsg-main-nav) .tg-chat-page {
  padding-bottom: 0;
}

.tsg-priority-card {
  margin: 0 0 20px;
  padding: 17px;
  border: 1px solid #8c702d;
  border-radius: 18px;
  background: linear-gradient(145deg, #241d0c, #13110a);
  display: grid;
  gap: 7px;
  color: var(--tsg-copy);
  text-decoration: none;
}

.tsg-priority-card__eyebrow {
  color: var(--tsg-gold-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.tsg-priority-card__title {
  font-size: clamp(17px, 4.5vw, 21px);
  font-weight: 900;
  line-height: 1.35;
}

.tsg-priority-card__copy {
  color: #e0dfdc;
  font-size: 14px;
  line-height: 1.6;
}

.tsg-priority-card__action {
  margin-top: 2px;
  color: var(--tsg-gold-strong);
  font-size: 14px;
  font-weight: 850;
}

.tsg-example-note,
.tsg-state-note,
.tsg-inline-note {
  margin: 10px 0 16px;
  padding: 10px 13px;
  border: 1px solid #43464d;
  border-radius: 11px;
  background: #121419;
  color: #d9dce2;
  font-size: 13px;
  line-height: 1.6;
}

.tsg-state-note[data-state="connected"] {
  border-color: #2b7555;
  color: var(--tsg-success);
}

.tsg-state-note[data-state="error"] {
  border-color: #81434d;
  color: var(--tsg-danger);
}

.tsg-filter-row,
.tsg-display-options {
  margin: 13px 0 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tsg-filter-chip {
  min-height: 41px !important;
  padding: 0 13px;
  border: 1px solid #4b4f57;
  border-radius: 999px;
  background: #111318;
  color: #eef0f4;
  font-size: 13px;
  font-weight: 800;
}

.tsg-filter-chip.active {
  border-color: #8b702a;
  background: #211a0b;
  color: var(--tsg-gold-strong);
}

.tsg-fee-note {
  margin: 12px 0 0;
  color: #d4d7de;
  font-size: 13px;
}

.tsg-progress {
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid var(--tsg-border);
  border-radius: 15px;
  background: #14161b;
}

.tsg-progress__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 850;
}

.tsg-progress__head strong { color: var(--tsg-gold-strong); }

.tsg-progress__track {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: #31343b;
}

.tsg-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d9a929, #f3ca58);
}

.tsg-empty {
  padding: 22px 16px;
  border: 1px dashed #555a63;
  border-radius: 15px;
  background: #101216;
  color: #e8ebef;
  text-align: center;
}

.tsg-settings-card {
  margin: 14px 0;
  padding: 17px;
  border: 1px solid #705a25;
  border-radius: 17px;
  background: #17140b;
}

.tsg-settings-card h2 {
  margin: 0 0 7px;
  font-size: 19px;
}

.tsg-settings-card p {
  margin: 0 0 14px;
  color: #dedcd5;
  font-size: 14px;
}

.tsg-settings-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--tsg-gold);
  color: var(--tsg-ink);
  font-weight: 900;
}

body[data-tsg-page="worker.html"] .job-visual,
body[data-tsg-page="worker-jobs.html"] .job:first-child,
body[data-tsg-page="company.html"] .tsg-company-hero {
  background-image: linear-gradient(90deg, rgba(6, 7, 9, .88), rgba(6, 7, 9, .34)),
    url("tsunagu-site-hero.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-tsg-page="worker-jobs.html"] .job:first-child {
  border-color: #6e5823;
}

body[data-tsg-page="worker-jobs.html"] .job {
  border: 1px solid #444952;
  background-color: #111318 !important;
  color: #f5f6f9 !important;
}

body[data-tsg-page="worker-jobs.html"] .job .rec {
  border-color: #886b29;
  background: #231b09;
  color: var(--tsg-gold-strong);
}

body[data-tsg-page="worker-jobs.html"] .job .metrics,
body[data-tsg-page="worker-jobs.html"] .job .metrics div {
  border-color: #444952;
}

body[data-tsg-page="worker-jobs.html"] .job .metrics small {
  color: #d4d8e0 !important;
}

body[data-tsg-page="worker-chat.html"] .chat,
body[data-tsg-page="company-chat.html"] .tg-chat-item {
  align-items: start;
}

body[data-tsg-page="worker-chat.html"] .chat b,
body[data-tsg-page="company-chat.html"] .tg-chat-item b {
  line-height: 1.45;
}

body[data-tsg-page="worker-chat.html"] .chat small {
  line-height: 1.62;
  overflow-wrap: anywhere;
}

body[data-tsg-page="pay.html"] .total {
  border-color: #846829 !important;
  background: linear-gradient(145deg, #231b0a, #11100c) !important;
}

body[data-tsg-page="worker-hired.html"] .success,
body[data-tsg-page="company-posthire.html"] .case {
  border-color: #806526 !important;
}

body.tsg-integrated :is(.tg-chat-page, .tg-composer) {
  max-width: 680px;
}

.tsg-upload-preview {
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid #454952;
  border-radius: 10px;
  color: #dedfe4;
  font-size: 13px;
}

.tsg-store-entry {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  margin: 12px 0 16px;
  padding: 13px 14px;
  border: 1px solid #987420;
  border-radius: 15px;
  background:
    radial-gradient(circle at 88% 20%, rgba(246, 199, 55, .16), transparent 36%),
    linear-gradient(135deg, #1b1609, #101114 68%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

.tsg-store-entry__mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7d35d, #dca715);
  color: #171104;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}

.tsg-store-entry__copy strong,
.tsg-store-entry__copy small {
  display: block;
}

.tsg-store-entry__copy strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.3;
}

.tsg-store-entry__copy small {
  margin-top: 5px;
  color: #d6d7dc;
  font-size: 13px;
  line-height: 1.45;
}

.tsg-store-entry__action {
  color: #f6c737;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.tsg-store-entry:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 430px) {
  body.tsg-integrated .tsg-header-actions { gap: 6px; }
  body.tsg-integrated .tsg-text-control { min-height: 39px !important; padding: 0 8px; }
  body.tsg-integrated nav.tsg-main-nav > a { font-size: 10px !important; }
  body.tsg-integrated nav.tsg-main-nav > a .tsg-nav-hint { font-size: 8px; }
  body.tsg-integrated .tsg-official-mark { width: 30px; height: 30px; }
  body[data-tsg-page="worker.html"] .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body[data-tsg-page="worker.html"] .meta { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body[data-tsg-page="worker.html"] .meta div:nth-child(2) { border-right: 1px solid #404045; }
  .tsg-store-entry { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; padding: 12px 11px; }
  .tsg-store-entry__mark { width: 48px; height: 48px; font-size: 10px; }
  .tsg-store-entry__copy strong { font-size: 16px; }
  .tsg-store-entry__copy small { font-size: 12px; }
  .tsg-store-entry__action { font-size: 12px; }
}

.tsg-account-card,.tsg-current-plan,.tsg-security-note{margin:16px 0;padding:18px;border:1px solid #41434b;border-radius:18px;background:linear-gradient(145deg,#151519,#0e0f12)}
.tsg-account-head{display:flex;justify-content:space-between;gap:10px;color:#d1d2d7}.tsg-account-head b[data-ready="true"]{color:#68da91}.tsg-account-bank{display:flex;align-items:center;gap:14px;margin:21px 0}.tsg-account-bank>span{font-size:30px;color:#f0c746}.tsg-account-bank strong,.tsg-account-bank small,.tsg-current-plan>span,.tsg-current-plan>small{display:block}.tsg-account-bank small,.tsg-current-plan>small{margin-top:7px;color:#c6c8d0;font-size:13px}.tsg-current-plan{border-color:#735b20}.tsg-current-plan h2{margin:10px 0 4px;font-size:23px}.tsg-current-plan strong{color:#f1c64c;font-size:24px}.tsg-security-note b{color:#f2cb59}.tsg-security-note p{color:#d2d4dc;line-height:1.8;font-size:14px}.tsg-plan-list{display:grid;gap:10px}.tsg-plan-list>a{padding:15px;border:1px solid #3c3e45;border-radius:12px;background:#111215}.tsg-plan-list>a.featured{border-color:#8f7326}.tsg-plan-list b,.tsg-plan-list small{display:block}.tsg-plan-list span{display:block;margin:7px 0;color:#f0c64c;font-weight:900}.tsg-plan-list small{color:#c9cbd2}.tsg-comparison-wrap{overflow-x:auto;margin:18px 0;border:1px solid #393b42;border-radius:13px}.tsg-comparison{min-width:660px;width:100%;border-collapse:collapse;font-size:13px}.tsg-comparison th,.tsg-comparison td{padding:13px 9px;text-align:center;border-bottom:1px solid #34363d}.tsg-comparison thead th{position:sticky;top:0;background:#17171a}.tsg-comparison tbody th{text-align:left;white-space:nowrap}.tsg-comparison .recommended{background:#1c180f;color:#f0ca61}.tsg-profile-facts{margin:16px 0;padding:4px 16px;border:1px solid #3b3e46;border-radius:16px;background:#111317}.tsg-profile-facts div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #30323a}.tsg-profile-facts div:last-child{border:0}.tsg-profile-facts span{color:#c8cbd2}.tsg-profile-facts b{max-width:64%;text-align:right;overflow-wrap:anywhere}.tsg-pay-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.tsg-pay-actions a{padding:14px 7px;border:1px solid #373943;border-radius:12px;background:#111215;text-align:center;font-size:12px}.tsg-pay-actions a i{display:block;margin-bottom:7px;color:#efc74d;font-size:19px;font-style:normal}

@media (prefers-reduced-motion: reduce) {
  body.tsg-integrated *,
  body.tsg-integrated *::before,
  body.tsg-integrated *::after {
    animation-duration: .001ms !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}
