:root {
  color-scheme: light;
  --bg: #fff7fa;
  --panel: #ffffff;
  --line: #efc9d8;
  --text: #432936;
  --muted: #886c78;
  --green: #eb4f8e;
  --cyan: #6baac5;
}

body {
  color: #432936 !important;
  background: #fff5f9 !important;
  background-image:
    linear-gradient(#f3d8e2 1px, transparent 1px),
    linear-gradient(90deg, #f3d8e2 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

.login-shell {
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.78fr);
}

.brand-panel,
.auth-card {
  color: #432936 !important;
  background: #ffffff !important;
  border-color: #efc9d8 !important;
  box-shadow: 0 18px 48px rgba(153, 68, 105, 0.13) !important;
}

.brand-panel {
  padding-top: 0 !important;
}

.brand-visual {
  height: 250px;
  overflow: hidden;
  margin: 0 -30px 24px;
  border-bottom: 1px solid #efc9d8;
  background: #fff0f6;
}

.brand-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 58%;
}

.brand-mark {
  width: 50px !important;
  height: 50px !important;
  margin-bottom: 18px !important;
  color: #ffffff !important;
  background: #e84b8a !important;
  border: 3px solid #fff0f6;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(211, 66, 123, 0.2);
}

.eyebrow {
  color: #bd356d !important;
}

h1,
strong {
  color: #432936 !important;
}

p,
label,
.tabs button,
.login-method span,
.notice span,
.feature-grid span {
  color: #876b77 !important;
}

.feature-grid div,
.notice,
.tabs,
.login-method,
.dev-code {
  color: #593845 !important;
  background: #fff3f7 !important;
  border-color: #efcbd9 !important;
}

.tabs button.active,
.primary-btn,
.login-method button.active {
  color: #ffffff !important;
  background: #e84b8a !important;
  box-shadow: 0 5px 12px rgba(210, 65, 123, 0.16);
}

.ghost-btn,
.login-method button {
  color: #a72f63 !important;
  background: #ffffff !important;
  border-color: #e7b9cb !important;
}

input,
select {
  color: #4c303d !important;
  background: #ffffff !important;
  border-color: #e6bdcd !important;
}

input::placeholder {
  color: #b197a2 !important;
}

input:focus,
select:focus {
  border-color: #df5a90 !important;
  box-shadow: 0 0 0 3px rgba(223, 90, 144, 0.13) !important;
}

.dev-code,
label small {
  color: #9b3562 !important;
}

@media (max-width: 860px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .brand-visual {
    height: 210px;
  }
}

@media (max-width: 520px) {
  .login-shell {
    width: min(100% - 24px, 1180px);
    padding: 12px 0 24px;
  }

  .brand-panel,
  .auth-card {
    padding: 22px;
  }

  .brand-visual {
    height: 180px;
    margin: -22px -22px 20px;
  }
}

/* FUYU CONCEPT B - login */
:root {
  --login-pink: #ef4f91;
  --login-line: #e9bfd0;
  --login-cyan: #31a9c2;
  --login-ink: #352b31;
}

body {
  background-color: #fffafb !important;
  background-image:
    linear-gradient(rgba(235, 168, 196, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235, 168, 196, 0.2) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(49, 169, 194, 0.18) 0 1px, transparent 1.5px) !important;
  background-size: 64px 64px, 64px 64px, 64px 64px !important;
}

.login-shell {
  gap: 18px !important;
}

.brand-panel,
.auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--login-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 8px 8px 0 #ffe3ee, 0 18px 42px rgba(111, 61, 82, 0.1) !important;
}

.brand-panel::before,
.auth-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 8px;
  top: 8px;
  width: 30px;
  height: 16px;
  border-top: 2px solid var(--login-pink);
  border-left: 2px solid var(--login-pink);
  pointer-events: none;
}

.brand-panel::after,
.auth-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 16px;
  border-right: 2px solid var(--login-cyan);
  border-bottom: 2px solid var(--login-cyan);
  pointer-events: none;
}

.brand-visual {
  height: 290px !important;
  border-bottom: 1px solid var(--login-line) !important;
  box-shadow: inset 0 -5px 0 rgba(239, 79, 145, 0.07);
}

.brand-visual img {
  object-position: 50% 58% !important;
  filter: saturate(0.92) contrast(0.98);
}

.brand-mark {
  width: 46px !important;
  height: 46px !important;
  outline: 1px solid #d793af;
  background: var(--login-pink) !important;
  box-shadow: 4px 4px 0 #ffd6e5 !important;
}

.brand-panel h1 {
  color: var(--login-ink) !important;
  font-size: 30px !important;
}

.eyebrow {
  color: #b92e66 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.feature-grid div,
.notice,
.tabs,
.login-method,
.dev-code {
  border: 1px solid #ecc9d6 !important;
  border-radius: 6px !important;
  background: #fff8fb !important;
  box-shadow: none !important;
}

.feature-grid div:nth-child(even) {
  border-color: #bfe2e9 !important;
  background: #f5fcfe !important;
}

.tabs button,
.login-method button,
.primary-btn,
.ghost-btn {
  min-height: 38px;
  border-radius: 5px !important;
  font-weight: 750 !important;
}

.tabs button.active,
.primary-btn,
.login-method button.active {
  border-color: #d93d7d !important;
  background: var(--login-pink) !important;
  box-shadow: 2px 2px 0 #ffcfe1 !important;
}

input,
select {
  min-height: 42px;
  border-radius: 5px !important;
  box-shadow: inset 3px 0 0 #fff0f6 !important;
}

input:focus,
select:focus {
  border-color: var(--login-cyan) !important;
  box-shadow: 0 0 0 3px rgba(49, 169, 194, 0.12), inset 3px 0 0 #fbd7e6 !important;
}

@media (max-width: 860px) {
  .brand-visual {
    height: 240px !important;
  }
}

@media (max-width: 520px) {
  .brand-panel,
  .auth-card {
    box-shadow: 4px 4px 0 #ffe3ee, 0 12px 28px rgba(111, 61, 82, 0.09) !important;
  }

  .brand-visual {
    height: 190px !important;
  }
}