/* [project]/app/v14/v14.css [app-client] (css) */
.v14-root {
  color: #252b34;
  background: radial-gradient(at top, #fff, #e9e9ec);
  min-height: 100dvh;
  padding: 48px 20px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

.v14-panel {
  background: #ffffffb8;
  border: 1px solid #d6d7db;
  border-radius: 24px;
  max-width: 560px;
  margin: 0 auto;
  padding: 32px;
  box-shadow: 0 12px 45px #242b3910;
}

.v14-badge {
  letter-spacing: .1em;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
}

.v14-panel h1 {
  margin: 20px 0 10px;
  font-size: 30px;
  line-height: 1.2;
}

.v14-panel h2 {
  margin-top: 28px;
  font-size: 19px;
}

.v14-panel p {
  color: #5a6372;
  font-size: 14px;
  line-height: 1.5;
}

.v14-safety {
  background: #eef2f8;
  border-radius: 12px;
  margin: 24px 0;
  padding: 14px;
  font-size: 12px;
  line-height: 1.7;
}

.v14-form {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.v14-form label {
  gap: 7px;
  font-size: 14px;
  display: grid;
}

.v14-form input:not([type="hidden"]), .v14-panel button {
  min-height: 48px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #c8cdd6;
  border-radius: 10px;
  padding: 10px 14px;
}

.v14-panel button {
  cursor: pointer;
}

.v14-panel .v14-primary {
  color: #fff;
  background: #376caa;
  border-color: #376caa;
}

.v14-panel :focus-visible {
  outline-offset: 3px;
  outline: 3px solid #8baff4;
}

.v14-panel button:disabled {
  opacity: .6;
  cursor: wait;
}

@media (max-width: 600px) {
  .v14-root {
    padding: 20px 12px;
  }

  .v14-panel {
    padding: 24px 20px;
  }

  .v14-form input {
    font-size: 16px;
  }
}

.v14-wide {
  max-width: 1400px;
}

.v14-toolbar {
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  display: flex;
}

.v14-toolbar label {
  gap: 6px;
  display: grid;
}

.v14-toolbar input, .v14-toolbar select {
  background: #fff;
  border: 1px solid #c8cdd6;
  border-radius: 10px;
  min-height: 48px;
  padding: 10px;
  font-size: 16px;
}

.v14-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 24px 18px;
  margin: 24px 0;
  display: grid;
}

.v14-panel .v14-cover-card {
  text-align: left;
  background: none;
  border: 0;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 0;
  font-size: 12px;
  display: flex;
}

.v14-cover-card strong {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  display: -webkit-box;
  overflow: hidden;
}

.v14-cover {
  justify-content: center;
  align-items: end;
  width: 100%;
  height: 220px;
  display: flex;
}

.v14-cover img {
  object-fit: contain;
  border-radius: 3px;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 5px 12px #0003;
}

.v14-paging {
  align-items: center;
  gap: 24px;
  margin: 24px 0;
  display: flex;
}

.v14-paging a {
  color: #376caa;
  align-items: center;
  min-height: 48px;
  display: flex;
}

@media (max-width: 600px) {
  .v14-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v14-cover {
    height: 190px;
  }

  .v14-toolbar label {
    width: 100%;
  }
}