html[data-surface="admin"] .staff-only { display: none !important; }
html[data-surface="staff"] {
  --bg: var(--app-bg);
  --text: var(--app-text);
  --ink:var(--app-text);
  --muted: var(--app-muted);
  --primary: var(--app-primary);
  --gradient: #285d45;
  --line: var(--app-line);
  --regular: #285d45;
  --urgent: #b58147;
  --check: #477c7c;
}
html[data-surface="staff"] body {font-family:var(--app-font);font-size:var(--app-body);font-weight:400;line-height:1.5;-webkit-tap-highlight-color:transparent;}
html[data-surface="staff"] button,
html[data-surface="staff"] input,
html[data-surface="staff"] select,
html[data-surface="staff"] textarea { border-radius: var(--app-radius); }
html[data-surface="staff"] button { min-height: 44px; }
html[data-surface="staff"] button:hover { background: #edf4ec; }
html[data-surface="staff"] .primary:hover { background: #1c4935; }
html[data-surface="staff"] :focus-visible { outline-color: #b58147; }
html[data-surface="staff"] h1,
html[data-surface="staff"] h2 { font-weight: 500; }
html[data-surface="staff"] .login-card { box-shadow: none; margin-top: 12vh; }
html[data-surface="staff"] .login-card > [data-service-settings] { width: 100%; margin-top: 12px; color: var(--primary); }
html[data-surface="staff"] .segmented { background: #e7eee6; border-radius: 14px; padding: 4px; }
html[data-surface="staff"] .segmented button { min-height: 38px; font-weight: 600; }
html[data-surface="staff"] .segmented .active { box-shadow: 0 3px 8px #17382e0c; }
html[data-surface="staff"] dialog { border-radius: 22px; }
html[data-surface="staff"] dialog::backdrop { background: #17382e66; }
html[data-surface="staff"] .step-card { background: #f5f7f2; border-radius: 16px; }
html[data-surface="staff"] .step-tabs .active { background: #e7f0e5; border-color: #a8c4ab; }
html[data-surface="staff"] .step-tabs button { flex-shrink: 0; }
html[data-surface="staff"] .detail-date { color: #b58147; }
@media (max-width: 600px) {
  html[data-surface="staff"] dialog {
    margin: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  }
  html[data-surface="staff"] .dialog-head { position: sticky; top: -22px; background: #fff; z-index: 1; padding-top: 12px; }
}

html[data-surface="staff"] .login-card > img { border-radius: 18px; }