/* macOS-inspired system typography and neutral surfaces. No downloaded fonts. */
:root {
  --purple: #0071e3; --purple-soft: #f1f5fa; --ink: #1d1d1f;
  --muted: #6e6e73; --line: #e5e5e7; --surface: #f5f5f7; --radius: 9px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px; -webkit-font-smoothing: antialiased;
}
button { font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 7px; border: 1px solid transparent; }
.secondary { color: #363638; background: white; border-color: #d2d2d7; }
.danger { color: #c13432; background: white; border: 1px solid #e7cece; }
.subtle { color: #0066cc; background: #f2f2f7; }
.icon-button { padding: 3px 9px; font-size: 24px; }
a { color: #0066cc; }
h1 { font-size: 32px; font-weight: 600; letter-spacing: -.8px; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.25px; }
h3 { font-size: 15px; font-weight: 600; }
.hint { font-size: 13px; line-height: 1.55; }
.eyebrow { text-transform: none; letter-spacing: .15px; font-size: 12px; font-weight: 500; }
.layout { grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { width: 224px; background: #fafafa; border-color: #dedee2; padding: 29px 14px 18px; }
.brand { padding: 0 13px 31px; }.brand img { width: 142px; }
.workspace { margin: 0 7px 27px; padding: 11px 10px; background: #f1f1f3; border-color: #e2e2e5; border-radius: 7px; }
.workspace .eyebrow { margin-bottom: 7px; font-size: 11px; }.workspace select { font-size: 14px; font-weight: 500; }
.nav-caption { padding: 0 13px 9px; }.nav { gap: 3px; }
.nav button { gap: 11px; color: #4e4e53; font-size: 14px; padding: 10px 12px; font-weight: 400; border: 0; }
.nav button.active { background: #e8e8ed; color: #1d1d1f; font-weight: 500; }
.nav button.active svg { color: #0066cc; }.nav svg { stroke-width: 1.65; }
.sidebar-foot { padding: 25px 11px 0; }
.environment { background: transparent; border: 0; border-top: 1px solid #dedee2; border-radius: 0; padding: 15px 0 0; font-size: 11px; color: #86868b; }
.environment strong { color: #6e6e73; font-weight: 500; }
.avatar { width: 33px; height: 33px; background: #efeff2; color: #6e6e73; border: 1px solid #e1e1e5; font-size: 12px; font-weight: 500; }
.identity strong { font-size: 13px; font-weight: 500; }.identity small { font-size: 11px; }.logout { font-size: 12px; padding: 9px 0; }
.topbar { height: 66px; padding: 0 36px; background: #fbfbfd; font-size: 13px; }
.topbar strong { color: #515154; font-weight: 400; }
.pill { padding: 4px 8px; border: 1px solid #e5e5ea; border-radius: 5px; background: #f7f7f9; color: #6e6e73; font-size: 12px; font-weight: 400; }
.pill.green { background: #f1f8f3; border-color: #dcebdd; color: #32804a; }
.pill.amber { background: #faf8f1; border-color: #eae4d1; color: #8b7539; }
.pill.purple { background: #f5f5f7; border-color: #e2e2e7; color: #6e6e73; }
.pill.red { background: #fcf3f3; border-color: #eedbdb; color: #a94b4b; }
.content { padding: 37px 36px 50px; }.page-head p { font-size: 14px; margin-top: 10px; }
.stats { gap: 0; background: white; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 28px; }
.stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 21px 23px; }.stat:last-child { border-right: 0; }
.stat .label { font-size: 13px; margin-bottom: 12px; }.stat .value { font-size: 27px; font-weight: 500; letter-spacing: -.5px; }.stat .hint { font-size: 12px; margin-top: 7px; }
.card { border-radius: 9px; }.card-head { padding: 21px 23px; }.card-head p { font-size: 13px; margin-top: 7px; line-height: 1.5; }.card-body { padding: 23px; }
.grid-two { grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr); }
table { font-size: 14px; }th { font-size: 12px; background: #fafafa; padding: 12px 23px; letter-spacing: 0; }td { padding: 18px 23px; border-color: #ededf0; }td strong { font-size: 14px; font-weight: 500; }td small { font-size: 12px; margin-top: 4px; }
.row-actions button { font-size: 12px; padding: 7px 10px; }
.empty { padding: 45px 20px; font-size: 14px; }.empty strong { font-size: 16px; font-weight: 500; }
.steps { gap: 22px; }.step .dot { width: 23px; height: 23px; background: #f5f5f7; color: #86868b; border: 1px solid #e5e5ea; border-radius: 50%; font-size: 12px; }
.step h3 { font-size: 14px; font-weight: 500; margin-bottom: 6px; }.step p { font-size: 13px; }
.banner { border: 0; border-top: 1px solid #dedee3; background: transparent; padding: 17px 0; border-radius: 0; gap: 12px; }
.banner h3 { font-size: 14px; font-weight: 500; margin-bottom: 5px; }.banner p { font-size: 13px; color: #6e6e73; }
.plan-hero { background: white; border-color: var(--line); border-radius: 9px; }.plan-price { font-weight: 500; }.plan-price span { font-size: 14px; }
.form-grid { gap: 21px; }.field { font-size: 14px; margin-bottom: 19px; }.field label { font-weight: 400; }
.field input, .field select, .field textarea { padding: 10px 11px; border-color: #c7c7cc; border-radius: 6px; font-size: 15px; }.field textarea { min-height: 85px; }
.section-label { font-size: 13px; }.error { font-size: 13px; color: #c13432; }
.notice { padding: 14px 16px; border: 1px solid #e5e5ea; background: #f7f7f9; border-radius: 7px; color: #6e6e73; font-size: 13px; line-height: 1.6; }
.check-list label { font-size: 14px; }
dialog { width: min(530px, calc(100% - 32px)); border-color: #d2d2d7; border-radius: 12px; box-shadow: 0 20px 70px #0002; padding: 27px; }
dialog::backdrop { background: #0005; backdrop-filter: blur(2px); }.dialog-head h2 { font-size: 20px; }
.login-art { background: #f5f5f7; border-right: 1px solid var(--line); }.login-art h1 { font-size: 46px; letter-spacing: -1.4px; }.login-art p { color: #6e6e73; font-size: 16px; }
.login-form h2 { font-size: 28px; }.login-form > p { font-size: 14px; }
.sso-button { display: block; text-align: center; padding: 12px; border: 1px solid #c7c7cc; border-radius: 7px; color: #1d1d1f; margin: 0 0 26px; font-weight: 500; }
#toast { background: #323234; font-size: 14px; box-shadow: 0 10px 35px #0002; }
.invoice-totals strong { font-size: 20px; font-weight: 500; }.key-value { font-size: 14px; }
.footer-note { font-size: 12px; color: #86868b; margin-top: 27px; }.toolbar-select { border-color: #c7c7cc; border-radius: 6px; }.count { font-size: 13px; }
@media (max-width: 1100px) {
  .content { padding: 29px 24px; }.topbar { padding: 0 24px; }.grid-two { grid-template-columns: 1fr; }
  .stat { border-bottom: 1px solid var(--line); }.stat:nth-child(2) { border-right: 0; }.stat:nth-last-child(-n+2) { border-bottom: 0; }
  .card-head { padding: 20px; }td, th { padding: 15px 20px; }
}
@media (min-width: 721px) and (max-width: 1350px) {
  .grid-two { grid-template-columns: 1fr; }
  .grid-two > div:last-child .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }.sidebar { position: static; width: auto; padding: 19px 16px; }
  .brand { padding: 0 5px 18px; }.brand img { width: 132px; }.workspace { margin: 0 0 15px; }
  .nav button { padding: 9px 11px; font-size: 13px; }.topbar { height: 51px; padding: 0 20px; }
  .content { padding: 26px 16px; }.page-head h1 { font-size: 28px; }.stat { padding: 18px; }.stat .value { font-size: 25px; }
  .card-body { padding: 20px; }.login-form { padding: 60px 25px; }
}