/* Shared account and merchant surfaces, matching the public site's mint theme. */
body { --account-accent: var(--primary); --account-ink: var(--primary-text); --account-line: var(--border); font-family: var(--yw-font-sans) !important; font-size: var(--yw-text-sm); padding-top: 0; }
body > header > .max-w-6xl, body > footer > .max-w-6xl, #main-content > .max-w-6xl { max-width: 880px; padding-left: 24px; padding-right: 24px; }
body > header a[href="/"] { color: var(--account-accent); }
body > header a[href="/merchant/apply"].text-white { color: white; }
#main-content { width: 100%; max-width: none; margin: 0; padding: 0; min-height: 0; }
#main-content > .max-w-6xl { padding-top: 24px; padding-bottom: 32px; }
#main-content aside nav a { min-height: 44px; border-radius: var(--yw-radius-lg); }
#main-content aside nav a[aria-current=page] { color: var(--account-ink); background: var(--primary-soft); }
#main-content aside nav svg { flex: 0 0 20px; }
#main-content aside h3 { overflow-wrap: anywhere; }
#main-content .bg-white { border-color: var(--account-line); }
#main-content h1 { font-size: 20px; line-height: 1.5; }
#main-content .btn, #main-content .settings-action-btn { min-height: 44px; height: auto; padding: 10px 20px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border-radius: var(--yw-radius-lg); border: 1px solid var(--account-line); font-size: 14px; font-weight: 600; cursor: pointer; }
#main-content .btn-primary { background: var(--account-accent); color: white; }
#main-content .btn-outline, #main-content .btn-ghost, #main-content .btn.secondary { background: var(--card) !important; color: var(--account-ink); }
#main-content button:disabled { cursor: not-allowed; opacity: .55; }
#main-content :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
#main-content input:not([type=hidden]):not([type=radio]):not([type=checkbox]):not([type=file]), #main-content textarea { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--input); border-radius: var(--yw-radius-lg); background: var(--card); color: var(--card-foreground); }
#main-content input[type=radio] { appearance: auto; width: 16px; height: 16px; accent-color: var(--account-ink); }
#main-content textarea { resize: vertical; min-height: 124px; }
#main-content input::placeholder, #main-content textarea::placeholder { color: var(--muted-foreground); }
#main-content [hidden] { display: none !important; }
#main-content .form-status, #merchant-status, #license-status { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#merchant-status:empty, #license-status:empty { display: none; }
#merchant-status:not(:empty) { margin-bottom: 16px; }
#merchant-status.bad, #license-status.bad, #main-content .form-status.bad { color: #b42318; }
#main-content .account-load-error { padding: 32px; text-align: center; background: var(--card); border: 1px solid var(--account-line); border-radius: var(--yw-radius-lg); }
#main-content .account-load-error p { margin-bottom: 16px; color: #b42318; }
#account-pagination:empty, #account-pagination[hidden] { display: none; }
#account-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; font-size: 14px; color: var(--muted-foreground); }
#account-overview-orders > .empty { border: 0; box-shadow: none; padding: 32px 0; border-radius: 0; }
#account-overview-orders > .empty a { display: none; }
body[data-original-page=account] #main-content div.grid > a { padding: 14px; gap: 10px; min-width: 0; }
body[data-original-page=account] #main-content div.grid > a > span { width: 32px; height: 40px; }
body[data-original-page=account] #main-content div.grid > a > div { font-size: 12px; white-space: nowrap; }
#upload-area { position: relative; min-height: 152px; display: grid; place-content: center; border-radius: var(--yw-radius-2xl); }
#license-preview img { max-height: 200px; margin: auto; object-fit: contain; }
#license-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
#upload-area:focus-within { outline: 3px solid var(--account-ink); outline-offset: 3px; }
#merchant-form [data-step-tab] { line-height: 1.6; }
#merchant-form [data-step-tab][aria-current=step] { background: white; color: var(--account-ink); box-shadow: 0 1px 6px #0f172a0d; }
#merchant-form [data-step-panel] { scroll-margin-top: 88px; }
#merchant-form [data-step-panel]:focus { outline: none; }
#merchant-form button, #merchant-form a { min-height: 44px; }
#merchant-form [aria-invalid=true] { border-color: #b42318 !important; }
#account-avatar-file { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
label[for=account-avatar-file] { min-width: 36px; min-height: 36px; }
label[for=account-avatar-file]:focus-within { outline: 3px solid var(--account-ink); outline-offset: 3px; }
#pwd-modal { padding: 20px; }
#pwd-modal > div { max-height: calc(100dvh - 40px); overflow-y: auto; }
@media (min-width: 1024px) {
  #main-content aside { width: 196px; }
  #main-content aside nav a { min-height: 36px; padding: 8px 12px; gap: 10px; font-size: 14px; }
  #main-content aside nav svg { width: 18px; height: 18px; flex-basis: 18px; }
  #main-content aside .p-4 { padding: 16px; }
  #sidebarAvatarContainer { width: 48px; height: 48px; }
  #main-content aside .gap-4 { gap: 12px; }
  #main-content > div > .gap-6 { gap: 20px; }
  #main-content h1 { font-size: 18px; }
  #main-content .p-6 { padding: 24px; }
  body > footer h3 { font-size: 20px; line-height: 1.5; }
  body > footer .gap-10 { gap: 24px; }
  body > footer .gap-8 { gap: 16px; }
  body > footer li { font-size: 12px; }
}
@media (max-width: 639px) {
  #main-content > .max-w-6xl { padding-top: 20px; padding-bottom: 24px; }
  #main-content aside nav { gap: 4px; }
  #main-content aside nav a { padding: 10px; gap: 8px; font-size: 14px; }
  #main-content .p-6 { padding: 20px; }
  #main-content input, #main-content textarea { font-size: 16px; }
  #merchant-form > .flex { flex-wrap: wrap; gap: 8px; }
  #merchant-form button, #merchant-form a { padding-left: 16px; padding-right: 16px; }
  #merchant-form [data-step-tab] { font-size: 12px; padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) { #main-content *, #main-content *::before, #main-content *::after { transition: none !important; animation: none !important; } }

/* Account pages use the same public-site geometry and semantic tokens. The
   templates still carry legacy utility classes, so this scoped layer is the
   single final authority for the account shell and its responsive states. */
body[data-original-page^="account"] #main-content > .max-w-6xl {
  max-width: var(--yw-container);
  padding: var(--yw-space-8) 0 var(--yw-space-16);
}
body[data-original-page^="account"] #main-content > .max-w-6xl > .flex {
  gap: var(--yw-space-8) !important;
  align-items: flex-start;
}
body[data-original-page^="account"] #main-content aside {
  width: 240px !important;
  flex: 0 0 240px;
}
body[data-original-page^="account"] #main-content aside > div {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--yw-radius-xl) !important;
  box-shadow: var(--yw-shadow-sm) !important;
}
body[data-original-page^="account"] #main-content aside > div:first-child {
  margin-bottom: var(--yw-space-4) !important;
}
body[data-original-page^="account"] #main-content aside > div:first-child > div {
  padding: var(--yw-space-5) !important;
}
body[data-original-page^="account"] #sidebarAvatarContainer {
  width: 52px !important;
  height: 52px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: var(--yw-radius-full) !important;
}
body[data-original-page^="account"] #sidebarUserName {
  color: var(--card-foreground) !important;
  font-size: var(--yw-text-md) !important;
}
body[data-original-page^="account"] #main-content aside > div:nth-child(2) nav {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--yw-space-1) !important;
  padding: var(--yw-space-2) !important;
}
body[data-original-page^="account"] #main-content aside nav a {
  min-height: var(--yw-control-lg) !important;
  padding: 10px 12px !important;
  border-radius: var(--yw-radius-md) !important;
  color: var(--muted-foreground) !important;
  font-size: var(--yw-text-sm) !important;
  transition: color var(--yw-dur-fast) var(--yw-ease), background-color var(--yw-dur-fast) var(--yw-ease) !important;
}
body[data-original-page^="account"] #main-content aside nav a:hover,
body[data-original-page^="account"] #main-content aside nav a[aria-current="page"] {
  color: var(--primary-text) !important;
  background: var(--primary-soft) !important;
}
body[data-original-page^="account"] #main-content aside nav svg {
  width: 18px !important;
  height: 18px !important;
  color: currentColor;
}
body[data-original-page^="account"] #main-content > .max-w-6xl > .flex > .flex-1 > .space-y-6 {
  display: grid;
  gap: var(--yw-space-6) !important;
}
body[data-original-page^="account"] #main-content h1 {
  margin: 0 !important;
  color: var(--foreground) !important;
  font-size: var(--yw-text-3xl) !important;
  line-height: var(--yw-lh-tight) !important;
  font-weight: var(--yw-fw-bold) !important;
}
body[data-original-page^="account"] #main-content .bg-white,
body[data-original-page^="account"] #main-content .account-row,
body[data-original-page^="account"] #main-content .action-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  border-radius: var(--yw-radius-xl) !important;
  box-shadow: var(--yw-shadow-sm) !important;
}
body[data-original-page^="account"] #main-content .text-gray-900,
body[data-original-page^="account"] #main-content .text-gray-800,
body[data-original-page^="account"] #main-content .text-slate-900 {
  color: var(--card-foreground) !important;
}
body[data-original-page^="account"] #main-content .text-gray-500,
body[data-original-page^="account"] #main-content .text-slate-500,
body[data-original-page^="account"] #main-content .text-slate-600 {
  color: var(--muted-foreground) !important;
}
body[data-original-page^="account"] #main-content .border-slate-100,
body[data-original-page^="account"] #main-content .border-gray-100 {
  border-color: var(--border) !important;
}
body[data-original-page^="account"] #main-content .btn-primary,
body[data-original-page^="account"] #main-content a.bg-\[\#10c98f\] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
}
body[data-original-page^="account"] #main-content .btn-primary:hover,
body[data-original-page^="account"] #main-content a.bg-\[\#10c98f\]:hover {
  background: var(--primary-hover) !important;
}
body[data-original-page^="account"] #main-content .bg-\[\#f0fdf9\] {
  background: var(--primary-soft) !important;
}
body[data-original-page^="account"] #account-pagination {
  gap: var(--yw-space-2) !important;
  margin-top: 0 !important;
}
body[data-original-page^="account"] #account-pagination button,
body[data-original-page^="account"] #account-pagination a {
  min-width: var(--yw-control-md);
  min-height: var(--yw-control-md);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--yw-radius-md);
  background: var(--card);
  color: var(--muted-foreground);
}
body[data-original-page^="account"] #account-pagination [aria-current="page"] {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-text);
}
@media (max-width: 1023px) {
  body[data-original-page^="account"] #main-content aside { width: 100% !important; flex: none; }
  body[data-original-page^="account"] #main-content aside > div:nth-child(2) nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  body[data-original-page^="account"] #main-content > .max-w-6xl { padding-top: var(--yw-space-5); padding-bottom: var(--yw-space-10); }
  body[data-original-page^="account"] #main-content > .max-w-6xl > .flex { gap: var(--yw-space-5) !important; }
  body[data-original-page^="account"] #main-content aside > div:nth-child(2) nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-original-page^="account"] #main-content h1 { font-size: var(--yw-text-2xl) !important; }
}
/* Invitation card uses local styles so clipboard fallback works without CDN assets. */
.account-invitations{margin:24px 0;padding:24px;border:1px solid var(--border);border-radius:var(--yw-radius-2xl);background:var(--card);min-width:0}
.account-invitations h2{font-size:20px;font-weight:700;color:var(--card-foreground);margin:0 0 8px}
.account-invitations p{font-size:14px;line-height:1.7;color:var(--muted-foreground);margin:8px 0 16px}
.account-invitations label{display:block;font-size:14px;font-weight:600;margin:16px 0 8px}
.account-invitations input{display:block;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--input);border-radius:var(--yw-radius-lg);padding:12px;font:16px var(--yw-font-mono);background:var(--surface-sunken);color:var(--card-foreground)}
.account-invitations button{min-height:44px;padding:10px 18px;border:1px solid var(--primary);border-radius:var(--yw-radius-lg);background:var(--primary);color:var(--primary-foreground);font-size:14px;cursor:pointer}
.account-invitations button:disabled{opacity:.5;cursor:wait}
.account-invitations :focus-visible{outline:3px solid #26ba88;outline-offset:3px}
.account-invitations [hidden]{display:none!important}
.account-invitations form{border-top:1px solid var(--border);margin-top:20px;padding-top:4px}
.invitation-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.invitation-continue{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:#087b57;font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media(max-width:480px){.account-invitations{padding:18px}.invitation-actions button{flex:1;padding-inline:8px}.account-invitations input{font-size:14px}}
.yw-select{position:relative;min-width:0;width:100%}
.yw-select-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
.yw-select .yw-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:11px 14px;border:1px solid #d9e2ec;border-radius: var(--yw-radius-3xl);background:#fff;color:#24364b;font:inherit;font-size:14px;line-height:24px;text-align:left;cursor:pointer;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.yw-select-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yw-select-trigger::after{content:'';flex:none;width:7px;height:7px;margin:0 3px 4px 0;border-right:1.5px solid var(--muted-foreground);border-bottom:1.5px solid var(--muted-foreground);transform:rotate(45deg)}
.yw-select .yw-select-trigger:hover:not(:disabled){border-color:#64bfa2;background:#fff}
.yw-select .yw-select-trigger:focus-visible,.yw-select .yw-select-trigger[aria-expanded=true]{outline:none;border-color:#0aa57b;box-shadow:0 0 0 3px #0aa57b20}
.yw-select .yw-select-trigger[aria-invalid=true]{border-color:#dc5252}
.yw-select .yw-select-trigger:disabled{background:#f5f7f9;border-color:#e3e8ee;color:var(--muted-foreground);cursor:not-allowed;opacity:1}
.yw-select .yw-select-trigger.is-placeholder:not(:disabled){color:var(--muted-foreground)}
.yw-select-options{position:absolute;z-index:40;top:calc(100% + 7px);left:0;right:0;max-height:260px;padding:6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8c8c2 transparent;border:1px solid #e0e9e5;border-radius: var(--yw-radius-3xl);background:#fff;box-shadow:0 10px 32px #143c2c1c;color:#24364b}
.yw-select-options[hidden]{display:none!important}
.yw-select.opens-up .yw-select-options{top:auto;bottom:calc(100% + 7px)}
.yw-select-option{position:relative;display:flex;align-items:center;min-height:40px;padding:8px 28px 8px 12px;border-radius: var(--yw-radius-lg);line-height:24px;font-size:14px;cursor:pointer;overflow-wrap:anywhere}
.yw-select-option:hover,.yw-select-option.is-active{background:#f0f8f5}
.yw-select-option[aria-selected=true]{background:#e5f6ef;color:#087b59;font-weight:600}
.yw-select-option[aria-selected=true]::after{content:'✓';position:absolute;right:10px;color:#07966c}
@media(max-width:600px){.yw-select-option{min-height:44px}.yw-select .yw-select-trigger{font-size:16px}}
@media(prefers-reduced-motion:reduce){.yw-select .yw-select-trigger{transition:none}}