@import url('/design/tokens.css');
@import url('/fonts/m9-fonts.css');
@import url('/brand/icons/icons.css');
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
a { color: var(--m9-primary); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--m9-focus-width) solid var(--m9-ring);
  outline-offset: var(--m9-focus-offset);
  box-shadow: none;
}
.m9-surface { background: var(--m9-surface); border: var(--m9-border-default); border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); padding: var(--m9-space-6); }
.m9-page-header { margin-bottom: var(--m9-space-6); }
.m9-page-header h1 { margin: 0; color: var(--m9-brand-navy); font: var(--m9-type-page-title); letter-spacing: -.035em; }
.m9-page-header p { margin: var(--m9-space-2) 0 0; color: var(--m9-text-secondary); }
.m9-card-title { font: var(--m9-type-card-title); color: var(--m9-brand-navy); margin: 0; }
.m9-form { display: grid; gap: var(--m9-space-4); }
.m9-field-group { display: grid; gap: var(--m9-space-1-5); min-width: 0; }
.m9-field-group label { font: var(--m9-type-label); }
.m9-field-group input { width: 100%; min-width: 0; min-height: var(--m9-control-min-height); padding: var(--m9-space-2) var(--m9-space-2-5); background: var(--m9-surface); color: var(--m9-text); border: 1px solid var(--m9-input-border); border-radius: var(--m9-radius-md); }
.m9-field-group input[aria-invalid="true"] { border-color: var(--m9-danger-strong); }
.m9-helper, .m9-field-error { margin: 0; font: var(--m9-type-caption); color: var(--m9-text-secondary); }
.m9-field-error { color: var(--m9-danger); }
.m9-password { position: relative; }
.m9-password input { padding-right: calc(var(--m9-space-12) + var(--m9-space-2)); }
.m9-icon-button { position: absolute; right: var(--m9-space-1); top: 50%; transform: translateY(-50%); min-width: var(--m9-space-10); min-height: var(--m9-space-9); display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--m9-radius-sm); cursor: pointer; }
.m9-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--m9-space-2); min-height: var(--m9-control-min-height); padding: var(--m9-space-2) var(--m9-space-4); border: 1px solid var(--m9-primary); border-radius: var(--m9-radius-md); background: var(--m9-primary); color: var(--m9-on-primary); font: var(--m9-type-ui); font-weight: 700; cursor: pointer; }
.m9-button > .m9-icon { color: inherit; }
.m9-button:hover > .m9-icon, .m9-button:focus-visible > .m9-icon { stroke: currentColor; }
.m9-button-outline { background: var(--m9-surface); color: var(--m9-brand-navy); border-color: var(--m9-border); }
.m9-button-secondary { background: var(--m9-surface-secondary); color: var(--m9-brand-navy); border-color: var(--m9-surface-secondary); }
.m9-button-outline:hover > .m9-icon, .m9-button-outline:focus-visible > .m9-icon { stroke: url(#m9-gradient); }
.m9-link:hover, .m9-link:focus-visible, .m9-icon-button:hover, .m9-icon-button:focus-visible, .profile-links a:hover, .profile-links a:focus-visible, .m9-button-outline:hover, .m9-button-outline:focus-visible {
  background-image: var(--m9-gradient-brand);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}
.m9-link:hover > .m9-icon, .m9-link:focus-visible > .m9-icon, .m9-icon-button:hover > .m9-icon, .m9-icon-button:focus-visible > .m9-icon, .profile-links a:hover > .m9-icon, .profile-links a:focus-visible > .m9-icon, .m9-button-outline:hover > .m9-icon, .m9-button-outline:focus-visible > .m9-icon {
  color: var(--m9-primary);
  stroke: currentColor;
}
.m9-button:disabled, .m9-icon-button:disabled, .m9-tab:disabled { background: var(--m9-disabled-bg); color: var(--m9-text-secondary); border-color: var(--m9-border); cursor: wait; }
.m9-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--m9-space-2); min-height: var(--m9-control-min-height); font: var(--m9-type-ui); text-underline-offset: var(--m9-space-1); }
.m9-tabs { display: flex; border-bottom: var(--m9-border-default); margin-bottom: var(--m9-space-6); }
.m9-tab { flex: 1; min-height: var(--m9-space-12); padding: var(--m9-space-2); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--m9-text-secondary); font: var(--m9-type-ui); cursor: pointer; }
.m9-tab[aria-selected="true"] { color: var(--m9-primary); border-bottom-color: var(--m9-primary); font-weight: 700; }
.m9-alert { padding: var(--m9-space-3); margin-bottom: var(--m9-space-4); border: 1px solid var(--m9-danger-strong); border-radius: var(--m9-radius-md); color: var(--m9-danger); background: var(--m9-danger-bg); font: var(--m9-type-ui); overflow-wrap: anywhere; }
.m9-alert[data-kind="success"] { color: var(--m9-success); border-color: var(--m9-success-strong); background: var(--m9-success-bg); }
.m9-alert small { display: block; margin-top: var(--m9-space-1); font: var(--m9-type-caption); }
.m9-badge { display: inline-flex; align-items: center; gap: var(--m9-space-1-5); padding: var(--m9-space-0-5) var(--m9-space-2); min-height: var(--m9-space-6); border-radius: var(--m9-radius-pill); background: var(--m9-success-bg); color: var(--m9-success); font: var(--m9-type-caption); }
.m9-badge .m9-icon { color: inherit; }
.m9-skeleton { display: block; height: var(--m9-space-10); background: var(--m9-disabled-bg); border-radius: var(--m9-radius-md); margin-bottom: var(--m9-space-4); }
.m9-spinner { width: var(--m9-space-4); height: var(--m9-space-4); border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--m9-radius-pill); animation: m9-spin 1s linear infinite; }
@keyframes m9-spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .m9-icon-button { min-width: 44px; min-height: 44px; right: 0; }
  .m9-field-group input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .m9-spinner { animation: none; } }