:root {
  --ink: #315d67;
  --muted: #647a80;
  --green: #315d67;
  --green2: #e5f1f4;
  --gold: #a6c8d3;
  --paper: #f4f8f9;
  --line: #d5e3e7;
}

.topbar { background: #315d67; }
.brand .brand-mark {
  background-color: #fff;
  background-image: url("logo-equipaderm.png");
  background-repeat: no-repeat;
  background-size: 142px 142px;
  background-position: -54px -36px;
  border: 1px solid #c6dce2;
}
.topbar nav a { color: #edf6f8; }
.user { border-color: #789aa3; }
.conditional { background: #edf5f7; border-color: #c9dfe5; }
.sku-results button:hover,
.sku-results button:focus { background: #edf5f7; }
.sku-selected { border-color: #9fc0ca; }
.sku-chip { border-color: #b8d2da; background: #e7f1f4; }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: #76a5b2;
  box-shadow: 0 0 0 3px #a6c8d340;
  outline: none;
}
.user-menu { display: flex; align-items: center; gap: 9px; }
.user-menu form { margin: 0; }
.user-menu button { border: 0; background: transparent; color: #edf6f8; cursor: pointer; text-decoration: underline; }
.login-wrap { min-height: calc(100vh - 150px); display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 80px; }
.login-intro { max-width: 520px; }
.login-intro h1 { font-size: 48px; }
.login-intro p { color: var(--muted); font-size: 17px; }
.login-card { padding: 34px; }
.login-card h2 { margin-bottom: 24px; }
.login-card .button { width: 100%; }
@media (max-width: 760px) { .login-wrap { grid-template-columns: 1fr; gap: 28px; } .login-intro h1 { font-size: 36px; } }
.first-access { text-align: center; margin-top: -50px; }
.first-access a { color: var(--green); font-weight: 700; }
.users-layout { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: start; }
.user-list article { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.user-list article:last-child { border-bottom: 0; }
.user-list article div span { display: block; color: var(--muted); font-size: 13px; }
.seller-switch { display: flex; gap: 7px; margin-top: 16px; }
.seller-switch a { color: var(--green); border: 1px solid var(--line); background: #fff; padding: 6px 10px; border-radius: 16px; text-decoration: none; font-size: 13px; }
.seller-switch a.active { background: var(--green); color: #fff; }
@media (max-width: 760px) { .users-layout { grid-template-columns: 1fr; } }