.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 9px;
}

.login-art {
  background-size: cover;
  background-position: center;
}

.theme-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: start;
}

.theme-layout .form-panel { max-width: none; }
.theme-layout input[type="color"] { width: 90px; height: 46px; padding: 4px; cursor: pointer; }
.theme-layout input[type="file"] { background: #f7f9fb; }
.preview-card { position: sticky; top: 112px; }
.preview-window { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; margin-top: 14px; box-shadow: 0 12px 30px rgba(15,45,70,.12); }
.preview-nav { display: flex; align-items: center; gap: 9px; color: white; padding: 14px; }
.preview-nav img, .preview-nav i { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }
.preview-nav i { display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 900; }
.preview-body { min-height: 285px; padding: 70px 28px 28px; color: white; background: linear-gradient(145deg,#173b5f,#187d8a); background-size: cover; background-position: center; }
.preview-body h3 { font-size: 1.6rem; max-width: 330px; margin: 6px 0; }
.preview-body p { font-size: .85rem; max-width: 370px; }
.preview-body button { border: 0; color: white; border-radius: 7px; padding: 8px 13px; }
.help-text { font-size: .8rem; color: var(--muted); margin: 12px 0 0; }

@media (max-width: 1000px) {
  .theme-layout { grid-template-columns: 1fr; }
  .preview-card { position: static; }
}