/* tlc-root-font-enforcement */
:root {
  --tlc-root-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
option {
  font-family: var(--font-family, var(--tlc-root-font-family)) !important;
}

:root {
  --font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --standard-btn-height: 44px;
  --standard-btn-padding-x: 18px;
  --standard-btn-radius: 999px;
  --standard-btn-border-color: #111111;
  --standard-btn-fill: #ffd700;
  --standard-btn-text: #111111;
  --app-bg: #ffffff;
  --app-surface: #ffffff;
  --app-border: #d7dee7;
  --app-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  --app-radius: 14px;
  --action-blue: #63cdfa;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  font-family: var(--font-family);
  overflow: hidden;
  position: relative;
}

html, body, #root, #app-root {
  height: 100%;
  margin: 0;
  font-family: var(--font-family);
}

body {
  overflow: hidden;
  padding-bottom: 0;
  background-color: #ffffff;
  color: #000000;
}

#main-content:focus {
  outline: none;
}

#app-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.global-notice {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  max-width: min(92vw, 680px);
  padding: 11px 44px 11px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  z-index: 10050;
  font-size: 0.95rem;
  line-height: 1.35;
}

.global-notice.is-error {
  background: #fff5f5;
  color: #8a1120;
  border-color: #f1c3c8;
}

.global-notice.is-success {
  background: #f3fff8;
  color: #0f6a39;
  border-color: #bde7cb;
}


.page-container {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.page-scroll-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: #f2f2f2;
}

.page-scroll-container > * {
  flex: 1 1 auto;
  margin-top: 0 !important;
  min-height: 0;
  height: 100%;
}

html, body {
  background-color: #ffffff;
  color: #000000;
}

.left-side {
  flex: 1;
  background-color: #FFD700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 5rem;
  box-shadow: none;
  z-index: 1;
  position: relative;
  font-family: var(--font-family);
}

.left-side h1 {
  font-size: 7rem;
  font-weight: bold;
  font-family: var(--font-family);
}

.right-side {
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: black;
  box-shadow: none;
  z-index: 2;
  position: relative;
  font-family: var(--font-family);
}

.right-side h2 {
  font-size: 3.7rem;
  margin-bottom: -1px;
  font-family: var(--font-family);
}

.actions {
  margin-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  font-family: var(--font-family);
}

.actions button {
  margin: 0.5rem;
  padding: 0;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  margin-top: -10px;
  font-weight: bold;
  font-family: var(--font-family);
}

.welcome-page .actions {
  gap: 4px;
  margin-left: 0;
}

.welcome-page .actions button {
  margin: 0;
}

.welcome-page .separator {
  display: none;
}

.separator {
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 0.02rem;
  line-height: 1;
  font-family: var(--font-family);
}

.welcome-page.container,
.auth-page.container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.welcome-page .left-side,
.welcome-page .right-side,
.auth-page .left-side,
.auth-page .right-side {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  min-height: 0;
}

.dashboard-page {
  min-height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
}

.banner {
  background: #FFD700;
  background-color: #FFD700 !important;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}

.banner h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  text-align: left;
  font-family: var(--font-family);
}

.content {
  flex: 1;
  padding: 40px;
  background: #fff;
  font-family: var(--font-family);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.site-footer {
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  box-sizing: border-box;
  font-size: 13px;
  color: #111;
}
.site-footer-inner {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-links {
  display: flex;
  gap: 12px;
}
.footer-links a {
  color: #000;
  font-size: 12px;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}
.site-footer .footer-copyright {
  color: #111;
  font-size: 12px;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-decoration: none;
  color: inherit;
}

.card h2 {
  margin: 0;
}

.dashboard-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
.dashboard-container h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.dashboard-container p {
  text-align: center;
  color: #444;
  margin-top: 0;
}

.banner {
  background: #FFD700;
  background-color: #FFD700 !important;
  width: 100%;
  padding: calc(8px + env(safe-area-inset-top, 0)) 16px 8px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.banner h1 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  font-family: var(--font-family);
}

.header-controls { display: flex; align-items: center; gap: 12px }

@media (max-width: 768px) {

  .left-side h1 {
    font-size: 3rem;
  }

  .right-side h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
  }

  .actions {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .banner {
    padding: calc(8px + env(safe-area-inset-top, 0)) 12px 8px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .banner h1 {
    font-size: 1.4rem;
    text-align: left;
    margin: 0;
  }

  .content {
    padding: 16px;
  }

  .dashboard-container {
    max-width: 100%;
    padding: 12px;
    text-align: left;
  }

  .site-footer-inner {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  table {
    width: 100%;
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .welcome-page.container,
  .auth-page.container {
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .welcome-page .left-side,
  .welcome-page .right-side,
  .auth-page .left-side,
  .auth-page .right-side {
    flex: 1 1 50%;
    min-height: 0;
    height: 50%;
    width: 100%;
    padding: 18px 16px;
    box-sizing: border-box;
  }

  .welcome-page .right-side,
  .auth-page .right-side {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .welcome-page .left-side,
  .auth-page .left-side {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.2rem;
  }

  .auth-page .right-side {
    flex: 1 1 65%;
    height: 65%;
    padding: 12px 14px 8px;
    padding-top: 13.3px;
    justify-content: flex-start;
    overflow-y: hidden;
  }

  .auth-page .left-side {
    flex: 1 1 35%;
    height: 35%;
    padding: 12px 14px;
  }

  .welcome-page .left-side h1,
  .auth-page .left-side h1 { font-size: 2.8rem; }

  .banner {
    padding: calc(6px + env(safe-area-inset-top, 0)) 12px 8px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .banner h1 { font-size: 1.2rem; }

  button:not(.header-btn):not(.logout-btn), .btn, .primary-btn, .secondary-btn, .danger-btn {
    touch-action: manipulation;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card { padding: 16px; }

  .form-group input, .form-group textarea, .form-group select {
    width: 100%;
  }

  .site-footer-inner { flex-direction: column; align-items: center; gap: 8px }
}

  .profile-page {
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 20px;
    padding-top: 10px;
  }

  .profile-container {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .profile-container h2 {
    margin-top: 0;
    margin-bottom: 30px;
    color: #333;
    font-size: 2rem;
  }

  .loading, .error {
    padding: 20px;
    text-align: center;
    font-size: 1.1rem;
  }

  .profile-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
  }

  .profile-section h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #444;
    font-size: 1.1rem;
  }

  .profile-form { display:flex; flex-direction:column; gap:12px }

  .form-group { display:flex; flex-direction:column }

  .form-group label { font-weight:500; margin-bottom:6px; color:#555; font-size:0.95rem }

  .form-group input, .form-group textarea, .form-group select {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
  }

  .form-actions { display:flex; gap:12px; margin-top:10px }

  .primary-btn { background: #007bff; color: #fff; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 500 }
  .primary-btn:hover:not(:disabled) { background: #0056b3 }
  .secondary-btn { background: #fff; color: #666; border: 1px solid #ccc; padding: 12px 24px; border-radius: 4px }

  .payment-element { margin-top: 8px; }

  ul { padding-left: 18px; margin: 0; }
  li { margin-bottom: 6px; color: #333 }

  .back-link { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0e0e0 }
  .back-link a { color: #007bff; text-decoration: none; font-weight: 500 }

  #stripe-card-element, #stripe-us-bank-element, #stripe-eu-bank-element {
    background: #fff;
    border: 1px solid #dcdcdc;
    padding: 12px;
    border-radius: 6px;
  }

  .help-text { font-size: 0.9rem; color: #666; margin-top: 8px }

  .btn { padding:8px 14px; border-radius:6px; border:1px solid #ccc; cursor:pointer; background:#fff; color:#333 }
  .btn.primary { background:#667eea; color:#fff; border-color:#667eea }
  .btn.secondary { background:#fff; color:#667eea }
  .btn.link { background:transparent; border:none; color:#667eea; text-decoration:underline; padding:6px }
  .withdraw-methods { display:flex; gap:12px; margin-top:8px; justify-content:flex-start; align-items:center }
html,
body,
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

.auth-page .right-side {
  flex: 1 1 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #fff;
}

.auth-page .right-side h2 {
  margin-bottom: 32px;
  font-size: 2rem;
  font-weight: 600;
}

.auth-page .account-form {
  width: min(100%, 430px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: center;
}

.auth-page .form-row {
  display: flex;
  gap: 16px;
}

.auth-page .form-row > .form-group {
  flex: 1 1 0;
  min-width: 0;
}

.auth-page .message.error {
  margin-top: 10px;
  color: #b00020;
}

.auth-page .oauth-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  width: min(100%, 430px);
  align-self: center;
  flex-wrap: nowrap;
}

.auth-page #google-signin, .auth-page #apple-signin, .auth-page #appleid-signin, .auth-page #google-signup, .auth-page #apple-signup, .auth-page #appleid-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-page #google-signin button, .auth-page #google-signin * , .auth-page #google-signup button, .auth-page #google-signup * {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.auth-page #apple-signin button, .auth-page #apple-signin * , .auth-page #apple-signup button, .auth-page #apple-signup * {
  background: transparent !important;
  box-shadow: none !important;
  color: white !important;
}

.auth-page .google-btn,
.auth-page .apple-btn {
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  flex: 0 1 auto;
  min-width: 120px;
  padding: 10px 16px;
}

.auth-page .google-btn {
  background: #fff;
  color: #222;
  border: 1px solid #ccc;
}

.auth-page .google-btn:hover {
  background: #f2f2f2;
}

.auth-page .apple-btn {
  background: transparent !important;
  color: inherit !important;
}

.auth-page .apple-btn:hover {
  background: #222;
}

.auth-page .signin-button {
  width: 210px;
  height: 40px;
}

.auth-page .oauth-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  padding: 8px 11px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  min-width: 160px;
}

.auth-page .oauth-buttons .oauth-custom-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

.auth-page .oauth-custom-btn.apple-btn {
  background: #000;
  color: #fff;
  min-height: 40px;
  font-size: 1rem;
  white-space: nowrap;
}

.auth-page .oauth-custom-btn.google-btn {
  background: #fff;
  color: #222;
  border-color: rgba(0,0,0,0.12);
  min-height: 40px;
  font-size: 1rem;
  white-space: nowrap;
}

.auth-page .oauth-custom-btn span {
  white-space: nowrap;
}

.auth-page .oauth-icon {
  margin-right: 0.5ch;
  font-size: 1.05rem;
}

.auth-page .nav-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  width: min(100%, 430px);
  align-self: center;
}

.auth-page .nav-buttons button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #111;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  justify-content: center;
}

.auth-page .nav-buttons button:hover {
  background: #f5f5f5;
  color: #111;
}

@media (max-width: 768px) {
  .auth-page.container {
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .auth-page .right-side {
    order: 1;
    flex: 1 1 65%;
    width: 100%;
    min-height: 0;
    height: 65%;
    padding: 12px 14px 8px;
    padding-top: 13.3px;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  .auth-page .left-side {
    order: 2;
    flex: 1 1 35%;
    width: 100%;
    min-height: 0;
    height: 35%;
    padding: 12px 14px;
    justify-content: center;
    align-items: center;
  }

  .auth-page .right-side h2 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
  }

  .auth-page .account-form,
  .auth-page .oauth-buttons,
  .auth-page .nav-buttons {
    width: 100%;
    max-width: 420px;
  }

  .auth-page .account-form {
    gap: 10px;
  }

  .auth-page .form-row {
    flex-direction: column;
    gap: 8px;
  }

  .auth-page .oauth-buttons {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
  }

  .auth-page .oauth-custom-btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.92rem;
    padding: 0 10px;
  }

  .auth-page .nav-buttons {
    margin-top: 12px;
    gap: 6px;
  }

  .create-account-page.auth-page .right-side {
    flex: 1 1 66%;
    height: 66%;
    padding: 10px 12px 8px;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .create-account-page.auth-page .left-side {
    flex: 1 1 34%;
    height: 34%;
    min-height: 132px;
  }

  .create-account-page.auth-page .right-side h2 {
    margin-bottom: 8px;
    font-size: 1.9rem;
  }

  .create-account-page.auth-page .account-form {
    gap: 8px;
  }

  .create-account-page.auth-page .form-row {
    gap: 6px;
  }

  .create-account-page.auth-page .oauth-buttons {
    margin-top: 8px;
    gap: 6px;
  }

  .create-account-page.auth-page .oauth-custom-btn {
    min-height: 36px;
    font-size: 0.88rem;
    padding: 0 8px;
  }

  .create-account-page.auth-page .nav-buttons {
    margin-top: 8px;
    gap: 6px;
  }

  .create-account-page.auth-page .nav-buttons button {
    min-width: 0;
    padding: 6px 12px;
    font-size: 0.92rem;
  }
}

.page-scroll-container {
  background: var(--app-bg);
  padding: 0;
}

.content {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  background: transparent;
}

.dashboard-page,
.profile-page,
.send-payment-page {
  background: transparent;
}

.stripe-panel,
.settings-container {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.dashboard-container,
.profile-container {
  padding: 20px;
}

.banner {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#main-content {
  scroll-behavior: smooth;
}

.app-route-enter-active,
.app-route-leave-active {
  transition: none;
}

.app-route-enter-from,
.app-route-leave-to {
  opacity: 1;
  transform: none;
}

@media (max-width: 768px) {
  .page-scroll-container {
    padding: 0;
  }

  .content {
    padding: 10px;
  }
}

/* Landing page */
.page-scroll-container.landing-mode {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.landing-page {
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  color: #111;
  font-family: var(--font-family);
}

.landing-page * {
  box-sizing: border-box;
}

.landing-hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 16px 16px 10px;
  text-align: center;
  flex: 0 0 auto;
  background: #ffffff;
  border-bottom: none;
}

.landing-hero .title {
  margin: 0;
  line-height: 1.1;
  font-size: 42px;
  font-weight: 700;
}

.landing-hero .subtitle {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.login-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
}

.login-toggle:focus {
  outline: 2px solid #9dc3ff;
  outline-offset: 1px;
}

.login-dropdown {
  position: absolute;
  right: 16px;
  top: 68px;
  width: 280px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  z-index: 2000;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

.login-label {
  display: none;
}

.login-input {
  width: 100%;
  min-height: 34px;
  border: none;
  border-radius: 0;
  padding: 6px 0;
  font-size: 15px;
  background: transparent;
  color: #111;
  box-shadow: none;
  outline: none;
}

.login-input::placeholder {
  color: #666;
  opacity: 1;
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.login-btn {
  border: none;
  border-radius: 999px;
  background: var(--action-blue) !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  padding: 0 16px;
  min-height: 40px;
  cursor: pointer;
}

.login-error {
  margin-top: 8px;
  color: #c62828;
  font-size: 13px;
}

.landing-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 4px 16px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  background: #ffffff;
  position: relative;
}

.landing-toc {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 6px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: auto;
}

.landing-toc-title {
  display: none;
}

.landing-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-source-mark {
  display: none;
  position: absolute;
  left: 52px;
  bottom: 58px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 3px solid #ffd700;
  background: #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
}

.landing-source-mark span {
  font-size: 78px;
  line-height: 1;
  font-weight: 700;
  color: #ffd700;
}

@media (min-width: 1200px) and (min-height: 760px) {
  .landing-source-mark {
    display: flex;
  }
}

.landing-toc-item {
  margin: 0 0 7px 0;
}

.landing-toc-link {
  width: calc(100% - 14px);
  margin: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: transparent;
  color: #1b1b1b;
  border: 1px solid #d4d4d4;
  border-radius: 999px;
  padding: 5px 9px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.landing-toc-link,
.login-toggle,
.login-btn,
.cta-get-started {
  border-radius: 999px !important;
}

.landing-toc-link:hover {
  background: #f8f8f8;
  border-color: #c2c2c2;
}

.landing-toc-item.active .landing-toc-link {
  background: #f2f2f2;
  border-color: #bbbbbb;
  font-weight: 600;
}

.landing-toc-icon-wrap {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.landing-toc-svg {
  width: 20px;
  height: 20px;
}

.landing-toc-label {
  display: inline-block;
  min-width: 0;
  line-height: 1.2;
}

.landing-toc-item.icon-payments .landing-toc-icon-wrap { color: #1f8b4c; }
.landing-toc-item.icon-payroll .landing-toc-icon-wrap { color: #1d59d1; }
.landing-toc-item.icon-employees .landing-toc-icon-wrap { color: #b34700; }
.landing-toc-item.icon-settings .landing-toc-icon-wrap { color: #4b5563; }
.landing-toc-item.icon-profile .landing-toc-icon-wrap { color: #7a2bc1; }
.landing-toc-item.icon-kyc .landing-toc-icon-wrap { color: #aa2a2a; }
.landing-toc-item.icon-api .landing-toc-icon-wrap { color: #0a7d83; }
.landing-toc-item.icon-sdk .landing-toc-icon-wrap { color: #1f3e9e; }
.landing-toc-item.icon-source .landing-toc-icon-wrap { color: #d1a800; }
.landing-toc-item.icon-app .landing-toc-icon-wrap { color: #2066b0; }
.landing-toc-item.icon-privacy .landing-toc-icon-wrap { color: #0f766e; }
.landing-toc-item.icon-terms .landing-toc-icon-wrap { color: #64748b; }

.landing-main {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 3px 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.landing-topic-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: auto;
  width: 100%;
}

.landing-topic-center {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 clamp(14px, 3vw, 46px) 8px;
}

.landing-topic-shell {
  width: 100%;
  max-width: none;
}

.landing-topic-header {
  flex: 0 0 auto;
  margin: 0 0 6px;
  width: 100%;
  text-align: center;
}

.landing-topic-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
}

.landing-topic-copy {
  color: #1f1f1f;
  line-height: 1.64;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  min-width: 0;
}

.landing-topic-copy > *:first-child {
  margin-top: 0;
}

.landing-topic-copy > *:last-child {
  margin-bottom: 0;
}

.landing-topic-copy h1,
.landing-topic-copy h2,
.landing-topic-copy h3 {
  line-height: 1.28;
  margin: 0 0 0.6em;
}

.landing-topic-copy p,
.landing-topic-copy ul,
.landing-topic-copy ol,
.landing-topic-copy blockquote,
.landing-topic-copy pre {
  margin: 0 0 0.45em;
}

.landing-topic-u-top,
.landing-topic-u-bottom {
  width: min(1360px, 100%);
  margin-inline: auto;
}

.landing-topic-u-middle {
  width: min(1440px, 100%);
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 44vw) minmax(0, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  align-items: start;
}

.landing-topic-body {
  width: min(820px, 100%);
  max-width: 100%;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
  text-align: left;
}

.landing-topic-image-slot {
  width: 100%;
  min-height: clamp(180px, 28vh, 300px);
  border: 2px dashed #c6d3e6;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fbff;
}

.landing-topic-image-slot-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #577194;
}

.landing-topic-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.landing-topic-empty h2 {
  margin: 0;
  font-size: 1.65rem;
}

.landing-topic-empty p {
  margin: 0;
  color: #444;
  font-size: 1rem;
}

.landing-feature-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  width: 100%;
  min-height: 0;
  padding: 8px 0 0;
}

.landing-feature-last {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(6px, 1vw, 16px);
  padding-bottom: 6px;
}

.landing-feature-last .landing-feature-item {
  min-width: min(320px, 100%);
}

.landing-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
  padding: 10px 8px;
  text-decoration: none;
  color: #1b1b1b;
}

.landing-feature-item:hover {
  text-decoration: underline;
}

.landing-feature-icon-wrap {
  width: clamp(52px, 5vw, 76px);
  height: clamp(52px, 5vw, 76px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.landing-feature-icon-wrap .landing-toc-svg {
  width: clamp(48px, 4.6vw, 70px);
  height: clamp(48px, 4.6vw, 70px);
}

.landing-feature-label {
  font-size: clamp(17px, 1.35vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.landing-feature-item.icon-payments .landing-feature-icon-wrap { color: #1f8b4c; }
.landing-feature-item.icon-payroll .landing-feature-icon-wrap { color: #1d59d1; }
.landing-feature-item.icon-employees .landing-feature-icon-wrap { color: #b34700; }
.landing-feature-item.icon-profile .landing-feature-icon-wrap { color: #7a2bc1; }
.landing-feature-item.icon-kyc .landing-feature-icon-wrap { color: #aa2a2a; }
.landing-feature-item.icon-api .landing-feature-icon-wrap { color: #0a7d83; }
.landing-feature-item.icon-sdk .landing-feature-icon-wrap { color: #1f3e9e; }
.landing-feature-item.icon-source .landing-feature-icon-wrap { color: #d1a800; }
.landing-feature-item.icon-app .landing-feature-icon-wrap { color: #2066b0; }

@media (max-width: 1280px) {
  .landing-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cta-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--source-footer-height, 32px) + env(safe-area-inset-bottom, 0px) + 8px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin: 0;
  padding: 0;
  z-index: 10030;
  pointer-events: none;
}

.cta-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  background: var(--action-blue);
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.18);
  pointer-events: auto;
}

@media (max-width: 900px) {
  .landing-page {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .landing-hero {
    padding: 12px 12px 4px;
  }

  .landing-hero .title {
    font-size: 34px;
  }

  .landing-hero .subtitle {
    margin-top: 6px;
    font-size: 16px;
  }

  .login-toggle {
    top: 14px;
    right: 12px;
    font-size: 14px;
  }

  .login-dropdown {
    top: 52px;
    right: 8px;
    width: min(280px, calc(100vw - 16px));
  }

  .landing-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 6px;
    padding: 3px 12px 8px;
  }

  .landing-toc {
    grid-column: 1;
    grid-row: 1;
    max-height: 34vh;
    padding: 8px 0 0;
  }

  .landing-source-mark { display: none; }

  .landing-main {
    grid-column: 1;
    grid-row: 2;
    padding: 2px 0 0;
    min-height: auto;
    overflow: visible;
  }

  .landing-topic-view {
    flex: 0 0 auto;
    overflow: visible;
  }

  .landing-topic-center {
    padding: 0 10px 10px;
  }

  .landing-topic-header {
    margin: 0 0 4px;
  }

  .landing-topic-header h2 {
    font-size: clamp(1.65rem, 5.8vw, 2.1rem);
  }

  .landing-topic-u-middle {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 2px auto 0;
  }

  .landing-topic-u-left,
  .landing-topic-u-right,
  .landing-topic-u-top,
  .landing-topic-u-bottom {
    width: 100%;
    max-width: 100%;
  }

  .landing-topic-image-slot {
    min-height: 170px;
  }

  .landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, 1fr);
  }

  .landing-feature-last .landing-feature-item {
    min-width: min(280px, 100%);
  }

  .cta-wrapper {
    bottom: calc(var(--source-footer-height, 32px) + env(safe-area-inset-bottom, 0px) + 6px);
  }
}

@media (max-width: 440px) {
  .landing-page {
    overflow: visible;
  }

  .landing-hero {
    padding: 8px 10px 4px;
  }

  .landing-hero .title {
    font-size: 28px;
  }

  .landing-hero .subtitle {
    margin-top: 4px;
    font-size: 14px;
  }

  .login-toggle {
    top: 10px;
    right: 10px;
    font-size: 13px;
    padding: 6px 12px;
  }

  .login-dropdown {
    left: 8px;
    right: 8px;
    width: auto;
    top: 40px;
  }

  .landing-content {
    padding: 2px 10px 6px;
    gap: 4px;
  }

  .landing-toc {
    max-height: 38vh;
    padding: 6px 0 0;
  }

  .landing-toc-link {
    font-size: 12px;
    padding: 6px 8px;
    min-height: 32px;
    width: calc(100% - 10px);
    margin: 0 5px;
    gap: 6px;
  }

  .landing-main {
    padding: 2px 0 0;
  }

  .landing-feature-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .landing-feature-last .landing-feature-item {
    min-width: 100%;
  }

  .landing-topic-header h2,
  .landing-topic-empty h2 {
    font-size: 1.2rem;
  }

  .landing-topic-copy {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .landing-topic-image-slot {
    min-height: 150px;
  }

  .landing-topic-empty p {
    font-size: 0.92rem;
  }

  .cta-wrapper {
    bottom: calc(var(--source-footer-height, 32px) + env(safe-area-inset-bottom, 0px) + 6px);
  }

  .cta-get-started {
    width: auto;
    text-align: center;
    font-size: 15px;
    padding: 0 14px;
  }
}

/* Layout and button standards */
@media (max-width: 768px) {
  body {
    overflow-y: auto !important;
  }

  .landing-toc {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 6px 0 10px;
    -webkit-overflow-scrolling: touch;
  }

  .landing-toc ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    width: max-content;
    padding: 0 8px 2px;
  }

  .landing-toc-item {
    margin: 0;
    flex: 0 0 auto;
  }

  .landing-toc-link {
    width: auto;
    margin: 0;
    min-height: 34px;
    padding: 0 12px;
    white-space: nowrap;
    gap: 7px;
  }

  .page-scroll-container,
  .page-scroll-container.landing-mode {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .page-scroll-container > * {
    height: auto;
    min-height: 100%;
    overflow: visible !important;
  }

  .page-scroll-container.landing-mode > .landing-page {
    min-height: 0;
  }
}

button:not(.header-btn):not(.logout-btn):not(.landing-toc-link):not(.login-toggle):not(.login-btn),
.btn,
.primary-btn,
.secondary-btn,
.danger-btn,
.invite-send-btn,
.invite-cancel-btn,
.open-account-btn,
.oauth-custom-btn,
a[role="button"] {
  min-height: var(--standard-btn-height) !important;
  padding: 0 var(--standard-btn-padding-x) !important;
  border-radius: var(--standard-btn-radius) !important;
  border: 2px solid var(--standard-btn-border-color) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: var(--standard-btn-text) !important;
}

button[type="submit"],
.btn.primary,
.primary-btn,
.danger-btn,
.btn.danger,
.invite-send-btn,
.open-account-btn,
.oauth-custom-btn {
  background: var(--standard-btn-fill) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

button:disabled,
.btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.danger-btn:disabled,
.invite-send-btn:disabled,
.open-account-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
}

html,
body,
#root,
#app-root {
  font-family: var(--font-family) !important;
}

#app-root *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--font-family) !important;
}

/* Preserve Font Awesome glyph rendering against global font overrides. */
#app-root .fa-brands,
#app-root .fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

#app-root .fa-solid,
#app-root .fas {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

#app-root .fa-regular,
#app-root .far {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
/* Extracted from Vue component <style> blocks */

/* Source: frontend/src/components/1099Card.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Source: frontend/src/components/1099s.vue */
.form-1099s-page { min-height: 1px; }


/* Source: frontend/src/components/8461Card.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Source: frontend/src/components/8461s.vue */
.form-8461s-page { min-height: 1px; }


/* Source: frontend/src/components/AdminDashboard.vue */
.dashboard-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.banner {
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.banner h1 {
  font-size: 3rem;
  font-weight: bold;
  margin: 0;
}

.burger-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.burger-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

.burger-btn:hover span {
  background: #f0f0f0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 24px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 8px 0;
  z-index: 1000;
}

.logout-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  width: 100%;
  text-align: left;
  transition: background 0.2s;
}

.logout-btn:hover {
  background: #f5f5f5;
}

.content {
  flex: 1;
  padding: 40px;
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card h3 {
  margin: 0 0 10px 0;
  color: #000;
}

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

.dashboard-grid {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.top-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.top-row.single-config { grid-template-columns: 1fr; justify-items: center }
.bottom-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.card-slot {
  background: #ffffff;
  border-radius: 8px;
  padding: 0;
  box-shadow: none !important;
  border: none !important;
  min-height: 110px;
  display: flex;
  align-items: stretch;
}
.card-slot > * {
  flex: 1 1 auto;
}

@media (max-width: 900px) {
  .top-row { grid-template-columns: repeat(2, 1fr); }
  .bottom-row { grid-template-columns: repeat(2, 1fr); }
}


/* Source: frontend/src/components/Benefits.vue */
.benefits-page { min-height: 1px; }


/* Source: frontend/src/components/CompletedPayments.vue */
.completed-payments { background:#fff; padding-bottom:40px }
.content { padding:20px }
.dashboard-container { max-width: none; padding: 0 24px; }
.stripe-panel { margin-top:18px; background:#fff; padding:16px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); overflow-x: auto }
.payments-bubbles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.payment-bubble {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 999px;
  min-height: 126px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.payment-bubble-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.payment-bubble-amount { margin-top: 8px; font-size: 15px; font-weight: 600; }
.payment-bubble-date { margin-top: 6px; font-size: 12px; color: #666; }
.payment-bubbles-empty { padding: 12px 4px; text-align: center; color: #666; }
.payment-bubble-action { margin-top: 10px; }
.loading { margin:12px 0; color:#666 }
.btn { padding:8px 14px; border-radius:6px; border:1px solid #ccc; cursor:pointer; background:#fff }
.btn.primary { background:#667eea; color:#fff; border-color:#667eea }
.btn.small { padding:6px 8px; font-size:0.9em }


/* Source: frontend/src/components/CompletedTransactionsCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; }


/* Source: frontend/src/components/ConfigureAccount.vue */
.configure-container { max-width:720px; margin:40px auto; display:flex; flex-direction:column; align-items:center; }
.configure-container.centered { align-items:center; text-align:center }
.lead { margin-top:8px; color:#333; max-width:640px }
  .form-block { display:flex; flex-direction:column; gap:10px; margin-top:20px; width:100%; max-width:640px }
  .form-block label { text-align:left; display:block; margin-bottom:6px; font-weight:600; color:#222 }
  .form-block input, .form-block select {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.02rem;
  }
  .form-block input::placeholder {
    font-size: 0.98rem;
  }
.form-block select { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; cursor: pointer; padding-right:36px; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.form-block select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23666' d='M0 0l5 6 5-6z'/></svg>"); }
.form-block select:focus { outline: 2px solid rgba(102,126,234,0.2); box-shadow: 0 0 0 3px rgba(102,126,234,0.06); }
.muted { color:#666; font-size:0.9rem }
.actions { margin-top:12px; display:flex; align-items:center; justify-content:center }
.primary-btn { background:#667eea; color:#fff; border:none; padding:6px 12px; border-radius:6px; cursor:pointer }
.message { margin-top:10px; color:#333 }

.configure-page main.content { max-height: calc(100vh - 120px); overflow: auto; padding-bottom: 20px; }

.selected-files ul { list-style:none; padding:0; margin:6px 0 0 0; text-align:left }
.selected-files li { font-size:0.9rem; color:#333 }

.documents-group { margin-top:14px; display:flex; flex-direction:column; gap:12px }
.form-block input[type="file"] { padding:6px 8px; background:#fafafa; border-radius:6px }
.documents-group label { text-align:left }

.camera-preview { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px }
.camera-preview video { width:100%; max-width:360px; border-radius:8px; background:#000 }
.camera-actions { display:flex; gap:8px }
.camera-actions button { padding:8px 12px; border-radius:6px; cursor:pointer }


/* Source: frontend/src/components/ConfigureAccountCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(0,0,0,0.06); }


/* Source: frontend/src/components/CustomerService.vue */
.header-row { display:flex; align-items:center; justify-content:space-between }
.submissions-list { display:flex; flex-direction:column; margin-top:12px }
.primary-btn { background:#667eea; color:#fff; border:none; padding:8px 12px; border-radius:6px }


/* Source: frontend/src/components/CustomerServiceCard.vue */
.cs-card { border:1px solid #eee; border-radius:8px; padding:12px; margin:8px 0; background:#fff }
.cs-card-header { display:flex; align-items:center; justify-content:space-between }
.cs-card-body { margin-top:8px }
.cs-card-actions { display:flex; gap:8px; margin-top:10px }
.primary-btn { background:#667eea; color:white; border:none; padding:8px 12px; border-radius:6px }
.secondary-btn { background:#f3f4f6; border:1px solid #ddd; padding:8px 12px; border-radius:6px }
.meta { color:#666 }
.badge { background:#eef2ff; color:#3730a3; padding:4px 8px; border-radius:999px; font-size:0.8rem; margin-left:8px }
.title-row { display:flex; align-items:center; gap:8px }


/* Source: frontend/src/components/DeleteAccount.vue */
.content { max-width: 720px; margin: 40px auto; padding: 0 16px; }
.card { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.muted { color: #666; margin-bottom: 12px; }
.confirm-row { margin: 16px 0; }
.confirm-row input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.actions { display: flex; gap: 12px; align-items: center; }
.btn { padding: 10px 14px; border-radius: 6px; border: 1px solid #ccc; cursor: pointer; background: #f5f5f5; }
.btn.danger { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
.message.success { color: #155724; background: #d4edda; padding: 8px; margin-top: 12px; border-radius: 4px; }
.message.error { color: #721c24; background: #f8d7da; padding: 8px; margin-top: 12px; border-radius: 4px; }


/* Source: frontend/src/components/EmployeeDashboard.vue */
.dashboard-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.banner {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logout-btn {
  background: white;
  color: #11998e;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.logout-btn:hover {
  background: #f0f0f0;
}

.content {
  flex: 1;
  padding: 40px;
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.middle-row, .tax-row { display:grid; grid-template-columns: repeat(4, 1fr); gap:20px }
.tax-row { grid-template-columns: repeat(2, 1fr); }
.final-row { display:grid; grid-template-columns: 1fr; gap:20px }

.ix-sixth-row-debug { display: none }
.sixth-row { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px; background: rgba(255,215,0,0.03); }

@media (max-width: 900px) {
  .tax-row .w2-slot,
  .final-row .settings-slot { display: none }
  .sixth-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card h3 {
  margin: 0 0 10px 0;
  color: #11998e;
}

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


/* Source: frontend/src/components/Employees.vue */
.employees-page { padding: 20px; }
.employees-list { list-style: none; margin: 0; padding: 0; }
.employee-row { padding: 12px; border-bottom: 1px solid #eee; }
.name { font-weight: 600; }
.meta { color: #666; font-size: 13px; }
.loading, .empty, .error { padding: 12px; color: #666; }

.invite-fab {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 28px;
	background: #1976d2;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	font-size: 28px;
	user-select: none;
}
.invite-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}
.invite-modal {
	background: #fff;
	padding: 18px;
	width: 420px;
	border-radius: 6px;
}
.invite-modal .fields { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.invite-modal .actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.invite-modal input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.invite-cancel-btn { margin-right: 8px; }
.invite-send-btn { background: #1976d2; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; }


/* Source: frontend/src/components/EmployeesCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Source: frontend/src/components/EnterpriseContact.vue */
.enterprise-contact-card { background:#fff; border:1px solid #e6e6e6; padding:18px; border-radius:8px; max-width:720px }
.enterprise-contact-card input, .enterprise-contact-card textarea { width:100%; margin-bottom:10px; padding:8px; box-sizing:border-box }
.enterprise-contact-card button { padding:10px 12px; background:#111;color:#fff;border:0;border-radius:6px }
.enterprise-contact-card .muted { color:#666 }
.enterprise-contact-card .notice { margin-top:10px; color:#155724 }
.enterprise-contact-card .form-actions { margin-top:12px; }


/* Source: frontend/src/components/Footer.vue */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  width: 100%;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  color: #111;
  z-index: 9999;
}
.site-footer-inner {
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  box-sizing: border-box;
  position: relative;
}
.footer-links { display:flex; gap:12px; }
.footer-links a { color: #000; font-size:12px; text-decoration:none }
.footer-links a:hover { text-decoration: underline }
.social-links {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.social-links a { display:inline-flex; align-items:center; justify-content:center; color:inherit; text-decoration:none }
.social-links svg { width:16px; height:16px; fill: currentColor; display:block }
.social-links a:hover svg { opacity:0.85 }
.footer-copyright { font-size:12px; color:#111 }


/* Source: frontend/src/components/KycWizard.vue */
.kyc-wizard-card { background:#fff; border:1px solid #e6e6e6; padding:18px; border-radius:8px; max-width:760px; }
.kyc-wizard-card label { display:block; margin-top:8px; font-weight:600; }
.kyc-wizard-card input[type=file] { width:100%; margin-top:6px; }
.kyc-wizard-card button { padding:10px 12px; background:#111;color:#fff;border:0;border-radius:6px }
.kyc-wizard-card .muted { color:#666 }
.kyc-wizard-card .notice { color:#155724; margin-top:8px }
.kyc-wizard-card .action-row { margin-top:12px; }
.kyc-wizard-card .open-account-btn { margin-left:8px; }


/* Source: frontend/src/components/PageWrapper.vue */
.page-wrapper { width: 100%; }
.page-inner { max-width: 1100px; margin: 0 auto; padding: 24px 16px; box-sizing: border-box; }
@media (min-width: 900px) { .page-inner { padding: 32px; } }


/* Source: frontend/src/components/Payroll.vue */
.profile-content-layout { display: flex; gap: 24px; align-items: flex-start; }
.profile-main-col { flex: 1; }
.profile-side-col { width: 360px; }
.profile-section-offset-sm { margin-top: 12px; }
.profile-section-offset-md { margin-top: 16px; }
.payment-selection-offset { margin-top: 12px; }
.stripe-selected-element { margin-top: 10px; }


/* Source: frontend/src/components/PayrollCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Source: frontend/src/components/PaystubCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Source: frontend/src/components/Paystubs.vue */
.paystubs-page { min-height: 1px; padding: 1rem; }
.paystub-list { list-style: none; padding: 0; margin: 0; }
.paystub-item { padding: 0.5rem 0; border-bottom: 1px solid #eee; }
.paystub-row { display:flex; justify-content:space-between; }
.paystub-meta { color: #666; font-size: 0.9rem; }
.error { color: #b00; }


/* Source: frontend/src/components/PaystubsCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Source: frontend/src/components/PendingPayments.vue */
.pending-payments { background:#fff; padding-bottom:40px }
.content { padding:20px }

.dashboard-container { max-width: none; padding: 0 24px; }

.stripe-panel { margin-top:18px; background:#fff; padding:16px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); overflow-x: auto }

.loading { margin:12px 0; color:#666 }

.btn { padding:8px 14px; border-radius:6px; border:1px solid #ccc; cursor:pointer; background:#fff }
.btn.primary { background:#667eea; color:#fff; border-color:#667eea }
.btn.secondary { background:#fff; color:#667eea }
.btn.link { background:transparent; border:none; color:#667eea; text-decoration:underline; padding:6px }
.btn.small { padding:6px 8px; font-size:0.9em }

.panel-actions { display:flex; gap:8px; align-items:center }
.panel-actions input[type=number] { width:120px; padding:8px }
.message { margin-top:10px; color:#cc0000 }


/* Source: frontend/src/components/PendingTransactionsCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; }


/* Source: frontend/src/components/Profile.vue */
.profile-page {
  background: transparent;
  min-height: 100vh;
  padding-bottom: 20px;
  padding-top: 10px;
}

.content {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.profile-container h2 {
  margin-top: 0;
  margin-bottom: 30px;
  color: #333;
  font-size: 2rem;
}

.loading, .error {
  padding: 20px;
  text-align: center;
  font-size: 1.1rem;
}

.error {
  color: #d32f2f;
  background: #ffebee;
  border-radius: 4px;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.profile-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.profile-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #444;
  font-size: 1.3rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #555;
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group input:disabled,
.form-group textarea:disabled {
  background: transparent;
  color: #666;
  cursor: not-allowed;
}

.profile-section-personal,
.profile-section-account {
  background: #ffffff;
  border: 1px solid #d5dbe3;
  border-radius: 14px;
  box-shadow: none;
  padding: 20px;
  margin-bottom: 0;
}

.help-text {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.primary-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.primary-btn:hover:not(:disabled) {
  background: #0056b3;
}

.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.secondary-btn {
  background: #fff;
  color: #666;
  border: 1px solid #ccc;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: #f5f5f5;
  border-color: #999;
}

.message {
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 0.95rem;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border-left: 4px solid #28a745;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border-left: 4px solid #dc3545;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item .label {
  font-weight: 600;
  color: #666;
  font-size: 0.9rem;
}

.info-item .value {
  color: #333;
  font-size: 1rem;
}

.back-link {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.back-link a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.back-link a:hover {
  color: #0056b3;
  text-decoration: underline;
}

#business_ein,
#auth_rep_ssn {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}


/* Source: frontend/src/components/ProfileCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; }


/* Source: frontend/src/components/ReceivePayment.vue */
.receive-payment-page { background:#fff; padding-bottom:40px }
.content { padding:20px }


/* Source: frontend/src/components/ReceivePaymentCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; }


/* Source: frontend/src/components/SendPayment.vue */
.send-payment-page {
  background: transparent;
  min-height: 100vh;
  padding-bottom: 20px;
  padding-top: 10px;
}

.send-payment-page .content {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.send-payment-page .profile-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.send-payment-page .profile-container h2 {
  margin-top: 0;
  margin-bottom: 30px;
  color: #333;
  font-size: 2rem;
}

.send-payment-page .loading {
  padding: 20px;
  text-align: center;
  font-size: 1.1rem;
}

.send-payment-page .stacked-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
}

.send-payment-page .profile-section {
  background: #ffffff;
  border: 1px solid #d5dbe3;
  border-radius: 14px;
  box-shadow: none;
  padding: 20px;
  margin-bottom: 0;
}

.send-payment-page .profile-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #444;
  font-size: 1.3rem;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

.send-payment-page .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.send-payment-page .form-group label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #555;
  font-size: 0.95rem;
}

.send-payment-page .form-group input,
.send-payment-page .form-group textarea,
.send-payment-page .form-group select {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.send-payment-page .form-group select {
  appearance: none;
  -webkit-appearance: none;
}

.send-payment-page .form-group input:focus,
.send-payment-page .form-group textarea:focus,
.send-payment-page .form-group select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.send-payment-page .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.send-payment-page .btn {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: all 0.2s;
}

.send-payment-page .btn.primary {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

.send-payment-page .btn.primary:hover {
  background: #0056b3;
  border-color: #0056b3;
}

.send-payment-page .btn.secondary {
  background: #fff;
  color: #666;
  border-color: #ccc;
}

.send-payment-page .btn.secondary:hover {
  background: #f5f5f5;
  border-color: #999;
}

.send-payment-page .payment-element {
  margin-top: 12px;
}

.send-payment-page .message.error {
  color: #721c24;
  background: #f8d7da;
  border-left: 4px solid #dc3545;
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
}

.send-payment-page .back-link {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.send-payment-page .back-link a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.send-payment-page .withdraw-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  justify-content: flex-start;
  align-items: center;
}

.send-payment-page .withdraw-methods .btn {
  padding: 8px 12px;
}


/* Source: frontend/src/components/SendPaymentCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; }


/* Source: frontend/src/components/Settings.vue */
.settings-page { background:#fff; padding-bottom:40px }
.settings-section { margin-top:16px; }
.content { padding:20px }
.muted { color:#666; font-size:13px }

.danger-zone { border-top:1px solid #eee; padding-top:16px; margin-top:16px }
.danger-btn { display:inline-block; background:#c62828; color:#fff; padding:10px 14px; border-radius:6px; text-decoration:none }
.danger-btn:hover { opacity:0.95 }
input#confirm { display:block; margin-top:8px; padding:8px; border:1px solid #ddd; border-radius:4px; width:100%; max-width:360px }
.email-input { display:block; margin-top:8px; padding:8px; border:1px solid #ddd; border-radius:4px; width:100%; max-width:360px }
.confirm-row { margin-top:8px; }
.confirm-row label { display:block; margin-bottom:6px }
.delete-inline { display:flex; flex-direction:column; align-items:center }
.delete-inline .confirm-row { width:100%; max-width:520px; display:flex; flex-direction:column; align-items:center }
.delete-inline .confirm-row label { text-align:center }
.delete-inline input#confirm, .delete-inline .email-input { margin-left:auto; margin-right:auto }
.delete-inline .danger-btn { margin-top:8px; margin-left:auto; margin-right:auto }
.delete-inline input::placeholder { text-align: center }
.delete-inline .muted { text-align: center }
.account-email-note { margin-top:6px; }
.delete-action-row { margin-top:8px; }
.delete-message { margin-top:8px; }
.success { color: green }
.error { color: #c62828 }


/* Source: frontend/src/components/SettingsCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; }


/* Source: frontend/src/components/SiteHeader.vue */
.banner {
  background: #FFD700;
  width: 100%;
  padding: calc(10px + env(safe-area-inset-top, 0)) 20px 10px 20px;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
}
.banner-inner h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
}
.banner-inner .brand { color: #fff; text-decoration: none; }
.banner { display: flex; align-items: center; gap: 12px; }
.banner-inner { display: flex; align-items: center; order: 1; flex: 1 1 auto; min-width: 0; }
.banner-inner .brand { cursor: pointer; text-align: left; }
.header-controls { display: flex; align-items: center; gap: 12px; order: 2; margin-left: auto; margin-right: 0; flex-shrink: 0; white-space: nowrap }

@media (max-width: 480px) {
  .banner { padding: calc(8px + env(safe-area-inset-top, 0)); }
  .banner-inner { order: 1; min-width: 0; }
  .banner-inner h1 { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
  .header-controls { order: 2; gap: 8px; margin-left: auto; flex-shrink: 0 }
  .header-controls a, .header-controls button { font-size: 0.95rem; padding: 6px 8px; }
  .logout-btn { padding: 6px 8px; }
}

@media (max-width: 768px) {
  .banner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .banner-inner {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-controls {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .header-support-btn,
  .header-logout-btn {
    display: none !important;
  }
}
.header-btn {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
}
.header-btn:hover { background: rgba(255,255,255,0.1) !important; }
.login-link { color: #fff; background: rgba(255,255,255,0.15); padding: 6px 10px; border-radius: 6px; text-decoration:none }
.user-name { color: #fff; font-weight:600 }
.logout-btn {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  min-height: auto !important;
  border-radius: 999px !important;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
}
.logout-btn:hover { background: rgba(255,255,255,0.1) !important; }


/* Source: frontend/src/components/SourceDashboard.vue */
.source-dashboard {
  width: calc(100vw - 48px);
  max-width: none;
  margin-left: calc(50% - 50vw + 24px);
  padding: 18px 0 8px;
}
.source-dashboard .dashboard-header {
  margin-bottom: 12px;
}
.source-dashboard .dashboard-user-name {
  width: min(100%, clamp(132px, 18vh, 188px));
  margin: 44px auto 14px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}
.source-dashboard .dashboard-header-intro {
  min-height: 96px;
  transition: opacity 0.36s ease, transform 0.36s ease;
}
.source-dashboard .dashboard-header-exit {
  opacity: 0;
  transform: translateY(-8px);
}
.source-dashboard .typing-caret {
  display: inline-block;
  width: 0.55ch;
  margin-left: 1px;
  border-right: 2px solid currentColor;
  animation: source-typing-caret 0.9s steps(1, end) infinite;
  vertical-align: -1px;
}
@keyframes source-typing-caret {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
.source-dashboard .dashboard-loading {
  text-align: center;
  margin: 40px 0;
}
.source-dashboard .configure-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 24px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.source-dashboard .configure-card:hover {
  box-shadow: none;
}
.source-dashboard .dashboard-cards {
  margin-top: 12px;
}
.source-dashboard .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 0;
  align-items: start;
}
.source-dashboard .dashboard-card {
  min-width: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
}
.source-dashboard .dashboard-card .card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.source-dashboard .dashboard-card .card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: min(100%, clamp(132px, 18vh, 188px));
  margin: 0 auto;
  min-height: 0;
  height: auto;
  padding: 8px 10px;
  border-radius: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}
.source-dashboard .dashboard-card .card-visual h3 {
  margin: 0;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  .source-dashboard .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .source-dashboard .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  .source-dashboard .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .source-dashboard .dashboard-cards {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 2px;
  }
  .source-dashboard .dashboard-user-name {
    width: min(100%, 220px);
    margin: 30px auto 12px;
    font-size: 1.35rem;
  }
  .source-dashboard .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .source-dashboard .dashboard-card {
    display: flex;
    justify-content: center;
  }
  .source-dashboard .dashboard-card .card-visual {
    width: min(100%, 220px);
  }
}
@media (max-width: 768px) {
  .source-dashboard {
    width: 100%;
    margin-left: 0;
    padding: 24px 0;
  }
}

@media (max-width: 768px) {
  .site-footer {
    justify-content: center !important;
  }
  .site-footer-inner {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 8px;
  }
  .footer-links {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    overflow-x: visible;
  }
  .footer-links a {
    flex: 0 0 auto;
    font-size: 11px;
    text-align: center;
  }
  .footer-links .mobile-logout-link {
    font-weight: 400;
  }
  .social-links,
  .footer-copyright {
    display: none;
  }
}


/* Source: frontend/src/components/SupportForm.vue */
.support-form-card { background:#fff; border:1px solid #e6e6e6; padding:18px; border-radius:8px; max-width:520px; }
.support-form-card input, .support-form-card textarea, .support-form-card select { width:100%; margin-bottom:10px; padding:8px; box-sizing:border-box; }
.support-form-card button { width:100%; padding:10px 12px; background:#111; color:#fff; border:0; border-radius:6px; }
.support-form-card .notice { margin:8px 0; color: #1a5; }
.support-form-card .small { font-size:12px; color:#666; margin-top:12px; }


/* Source: frontend/src/components/TotalTransactions.vue */
.transactions-page { background:#fff; padding-bottom:40px }
.content { padding:20px }

.dashboard-container { max-width: none; padding: 0 24px; }
.stripe-panel { margin-top:18px; background:#fff; padding:16px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); overflow-x: auto }
.loading { margin:12px 0; color:#666 }
.summary { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:12px }
.btn { padding:8px 14px; border-radius:6px; border:1px solid #ccc; cursor:pointer; background:#fff }
.btn.primary { background:#667eea; color:#fff; border-color:#667eea }
.btn.small { padding:6px 8px; font-size:0.9em }


/* Source: frontend/src/components/W2s.vue */
.w2s-page { min-height: 1px; }


/* Source: frontend/src/components/W4s.vue */
.w4s-page { min-height: 1px; }


/* Source: frontend/src/components/Wallet.vue */
.wallet-page { max-width:780px; margin: 0 auto; padding: 20px; }
.wallet-page .wallet-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.wallet-page .balance-block .label { font-size:12px; color:#666 }
.wallet-page .balance-block .amount { font-size:28px; font-weight:700 }
.wallet-page .controls { display:flex; gap:12px }
.wallet-page .btn { padding:8px 14px; border-radius:6px; border:1px solid #ccc; cursor:pointer }
.wallet-page .btn.primary { background:#667eea; color:#fff; border-color:#667eea }
.wallet-page .btn.secondary { background:#fff; color:#667eea }
.wallet-page .btn.link { background:transparent; border:none; color:#667eea; text-decoration:underline; padding:6px }
.wallet-page .stripe-panel { margin-top:18px; background:#fff; padding:16px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04) }
.wallet-page .card-element { margin:10px 0 }
.wallet-page .panel-actions { display:flex; gap:8px; align-items:center }
.wallet-page .panel-actions input[type=number] { width:120px; padding:8px }
.wallet-page .message { margin-top:10px; color:#cc0000 }
.wallet-page .withdraw-methods { display:flex; gap:12px; margin-top:8px; justify-content:center; align-items:center }
.wallet-page .hint-small { font-size: 12px; margin-top: 6px; }

.wallet-page .calculator-panel {
  margin-top: 28px;
  background:#f8fafc;
  padding:14px;
  border-radius:8px;
  border: 1px solid #e6eef6;
}
.wallet-page .calc-display {
  font-family: monospace;
  font-size:22px;
  background:#fff;
  padding:12px 10px;
  border-radius:8px;
  border:1px solid #e6eef6;
  margin-bottom:12px;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  caret-color: #667eea;
}
.wallet-page .calc-keys { display:grid; grid-template-columns: repeat(4,1fr); gap:8px }
.wallet-page .calc-key { padding:10px; background:#fff; border:1px solid #d6e4ff; border-radius:6px; cursor:pointer }
.wallet-page .calc-key.op { background:#eef2ff; }
.wallet-page .calc-key.eq { background:#667eea; color:#fff }
.wallet-page .calc-controls { margin-top:8px; display:flex; gap:8px }
.wallet-page .calc-history { margin-top:8px; font-size:12px; color:#444 }


/* Source: frontend/src/components/TotalTransactionsCard.vue, W2Card.vue, W4Card.vue, WalletCard.vue */
.card-link { text-decoration:none; color:inherit; display:block }
.card-visual { background:#fff; border-radius:8px; padding:20px; min-height:110px; display:flex; align-items:center; justify-content:center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.card-visual h3 { margin:0; font-size:16px }


/* Support.js extracted styles */
.support-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  color: #222;
}

.support-content {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.toc {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: auto;
  position: static;
  top: auto;
  align-self: stretch;
  margin-top: 8px;
}

.toc ul { list-style:none; padding-left:0; margin:0; }
.toc li { margin-bottom: 0.7px; }
.toc a { color: #000000; text-decoration:none; display:flex; align-items:center; min-height: 32px; padding: 4px 10px; border-radius: 999px; background: #f6f6f6; font-size: 14px; box-sizing: border-box; }
.toc a:hover { text-decoration:underline; color: #000000; background: #ededed; }
.toc li.active > a { background: #e5e5e5; font-weight: 700; }
.toc .toc-sections { margin-top: 6px; padding-left: 12px; }
.toc .toc-sections li { margin-bottom: 4px; }
.toc .toc-sections a { font-size: 13px; min-height: auto; padding: 4px 8px; border-radius: 4px; background: transparent; }

.topic-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

.topic-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 12px 0;
}
.topic-header h2 { margin: 0; }

.topic-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.topic-view .btn { display: inline-block; padding: 6px 10px; font-size: 14px; line-height: 1.2; border-radius: 6px; text-decoration: none; }
.topic-view .btn.danger { background: #c62828; color: #fff; border: none; }
.topic-view p > .btn { vertical-align: middle; }

.toc-toggle { display: none; background: #fff; border: 1px solid #e0e0e0; padding: 8px 12px; border-radius: 6px; font-weight: 600; cursor: pointer; position: relative; top: 1px; }
.toc-toggle:active { transform: translateY(1px); }
.support-debug { background: #fff3; padding: 8px 10px; border-radius: 6px; }
.toc-mobile-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 1px; margin-bottom: 6px; }
.support-debug-inline { margin-top: 8px; font-size: 12px; color: #666; }

@media (max-width:768px) {
  .support-content {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 8px;
  }
  .toc-toggle { display: inline-block; margin-bottom: 8px; }
  .toc-mobile-toolbar { padding-left: 8px; padding-right: 8px; }
  .toc { width: 100%; height: auto; max-height: 40vh; margin-top: 0; }
  .toc.collapsed { display: block; position: static; width: 100%; }
  .toc.collapsed nav ul { display: flex; gap: 0.7px; overflow-x: auto; padding: 6px 8px 6px 10px; white-space: nowrap; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .toc.collapsed li { display: inline-flex; scroll-snap-align: start; flex: 0 0 auto; }
  .toc.collapsed li a { white-space: nowrap; height: 32px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid #eee; display: inline-flex; align-items: center; justify-content: center; }
  .toc.open { display: block; position: fixed; top: 64px; left: 8px; right: 8px; max-height: 70vh; overflow:auto; background:#fff; z-index:10001; border-radius:8px; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,0.12); }
  .toc ul { max-height: 60vh; overflow:auto; }
  .toc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 10000; }
}

/* source_pass_page.js extracted styles */
.sp-wrap { position: relative; display:flex; align-items:center; justify-content:center; }
.sp-center { position:relative; display:flex; align-items:center; justify-content:center; border-radius:12px; overflow:hidden; box-shadow:0 8px 30px rgba(16,24,40,0.12); background:transparent; z-index:2; }
.sp-video { width:100%; height:100%; display:block; border:0; object-fit:cover; background:transparent; }
.sp-center iframe.sp-video { background:transparent; }
.sp-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events:none; z-index:1; }
.sp-item { position:absolute; transform-origin:center; pointer-events:auto; cursor:pointer; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; will-change:transform; }
.sp-item { transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 180ms ease; aspect-ratio: 1 / 1; }
.sp-item:hover { transform: scale3d(1.08,1.08,1); z-index: 1000; box-shadow: 0 18px 40px rgba(2,6,23,0.18); }
.sp-item .sp-thumb { width: calc(var(--sp-item-size, 96px)); height: calc(var(--sp-item-size, 96px)); border-radius:50%; overflow:hidden; display:inline-block; background:transparent; display:flex; align-items:center; justify-content:center; aspect-ratio: 1 / 1; box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
.sp-item .sp-thumb { padding: 6px; border: 4px solid #FFD700; }
.sp-item .sp-thumb img { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; border-radius:50%; aspect-ratio: 1 / 1; }
.sp-tooltip { position: absolute; min-width:160px; max-width:280px; background: rgba(0,0,0,0.88); color: #fff; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.3; box-shadow: 0 10px 30px rgba(2,6,23,0.2); opacity:0; transform: translateX(-50%) translateY(8px); transition: opacity 200ms ease, transform 200ms ease; pointer-events:none; z-index:1000; }
.sp-tooltip.show { opacity:1; transform: translateX(-50%) translateY(0); }
.sp-popout-overlay { position: fixed; left:0; top:0; width:100%; height:100%; display:block; z-index:2000; opacity:0; pointer-events:none; transition: opacity 160ms ease; background: transparent; }
.sp-popout-overlay.show { opacity:1; }
.sp-popout-overlay.center { display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); }
.sp-popout-overlay.inline { background: transparent; }
.sp-popout { position: fixed; left:50%; top:50%; transform: translate(-50%,-48%) scale(.98); max-width: min(86vw, 720px); max-height: 86vh; border-radius: 12px; overflow: hidden; background: #fff; padding: 12px; box-shadow: 0 20px 50px rgba(2,6,23,0.4); opacity: 0; transition: opacity 180ms ease, transform 180ms ease; }
.sp-popout.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.sp-popout .sp-popout-content { display:flex; flex-direction:column; gap:10px; max-height:80vh; overflow:auto; color:#0b1221; }
.sp-popout-title { font-weight:700; font-size:18px; color:#071028; }
.sp-popout-blurb { font-size:14px; color:#233044; }
.sp-popout-img-wrap { width:100%; height:320px; display:block; background:#f7fafc; border-radius:8px; overflow:hidden; }
.sp-popout-img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-item-popout { position: absolute; top: 50%; transform: translateY(-50%); width: 260px; max-width: 40vw; background:#fff; color:#071028; padding:12px; border-radius:10px; box-shadow: 0 14px 40px rgba(2,6,23,0.12); opacity:0; pointer-events:none; transition: opacity 160ms ease, transform 160ms ease; z-index: 1200; }
.sp-item-popout.left { transform-origin: right center; }
.sp-item-popout.right { transform-origin: left center; }
.sp-item-popout, .sp-item:hover .sp-item-popout, .sp-item.popout-open .sp-item-popout { display: none !important; opacity: 0 !important; pointer-events: none !important; }
.sp-item-popout .pop-title { font-weight:700; margin-bottom:6px; }
.sp-item-popout .pop-blurb { font-size:13px; margin-bottom:8px; color:#2b3b4a; }
.sp-item-popout .pop-img-wrap { width:100%; height:140px; border-radius:6px; overflow:hidden; background:#f7fafc; }
.sp-item-popout .pop-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 720px) {
  .sp-wrap { padding: 18px; }
  .sp-item .sp-thumb { width: calc(var(--sp-item-size, 96px) - 40px); height: calc(var(--sp-item-size, 96px) - 40px); aspect-ratio: 1 / 1; }
  .sp-item { transition: none; }
}

/* Source fullscreen layout overrides */
:root {
  --source-header-height: 56px;
  --source-footer-height: 32px;
}

#app-root {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body {
  overflow: hidden !important;
}

#app-root > header.banner {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--source-header-height);
  min-height: var(--source-header-height);
  z-index: 10040;
  padding-top: calc(10px + env(safe-area-inset-top, 0));
}

#main-content.page-container {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-bottom: var(--source-footer-height);
}

#main-content.page-container.has-header {
  padding-top: var(--source-header-height);
}

#main-content.page-container.is-header-hidden {
  padding-top: 0;
}

#main-content .page-scroll-container {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#main-content .page-scroll-container > * {
  height: auto;
  min-height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
}

.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--source-footer-height);
  min-height: var(--source-footer-height);
  z-index: 10040;
}

.profile-page,
.send-payment-page,
.settings-page,
.wallet-page,
.transactions-page,
.completed-payments,
.pending-payments,
.receive-payment-page {
  min-height: 100%;
}

.profile-page,
.send-payment-page {
  padding-top: 12px;
  padding-bottom: 16px;
}

.profile-page .content,
.send-payment-page .content {
  width: 100%;
  max-width: none;
  margin: 0;
}

.source-dashboard {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 0 12px;
}

.page-scroll-container.landing-mode .landing-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.page-scroll-container.landing-mode .landing-content {
  width: 100%;
  max-width: none;
  margin: 0;
}

.page-scroll-container.landing-mode .landing-hero .title,
.page-scroll-container.landing-mode .landing-hero .subtitle,
.page-scroll-container.landing-mode .cta-wrapper {
  text-align: center;
}

#main-content .page-scroll-container .content,
#main-content .page-scroll-container .wallet-page,
#main-content .page-scroll-container .receive-payment-page,
#main-content .page-scroll-container .transactions-page,
#main-content .page-scroll-container .settings-page,
#main-content .page-scroll-container .pending-payments,
#main-content .page-scroll-container .completed-payments,
#main-content .page-scroll-container .dashboard-container,
#main-content .page-scroll-container .profile-container {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}

#main-content .page-scroll-container .content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 768px) {
  :root {
    --source-header-height: 52px;
  }

  body {
    overflow: hidden !important;
  }

  #app-root > header.banner {
    padding-top: calc(8px + env(safe-area-inset-top, 0));
  }
}