:root {
  --nail-bg: #f5f3f5;
  --nail-surface: #fff;
  --nail-text: #191619;
  --nail-muted: #746c72;
  --nail-border: #e7e1e5;
  --nail-brand: #972f72;
  --nail-brand-dark: #702252;
  --nail-brand-soft: #f8edf4;
  --nail-danger: #b42318;
  --nail-radius: 18px;
  --nail-reading-size: 20px;
  --nail-shadow: 0 10px 30px rgba(43, 28, 38, 0.07);
}

* {
  box-sizing: border-box;
}

html {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--nail-text);
  background: var(--nail-bg);
}

body {
  margin: 0;
  background: var(--nail-bg);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.nail-app {
  min-height: 100vh;
}

.nail-primary-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 13px 20px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(
    135deg,
    var(--nail-brand),
    var(--nail-brand-dark)
  );
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 9px 22px rgba(151, 47, 114, 0.2);
}

.nail-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.nail-alert {
  padding: 12px;
  border-radius: 12px;
}

.nail-alert--error {
  background: #fee4e2;
  color: #912018;
}

.nail-alert--success {
  background: #dcfae6;
  color: #05603a;
}

.nail-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nail-empty-state,
.nail-form-card,
.nail-content-page article {
  padding: 20px;
  background: #fff;
}

.nail-empty-state {
  margin: 0;
  border: 1px solid var(--nail-border);
  border-radius: var(--nail-radius);
  text-align: center;
  box-shadow: var(--nail-shadow);
}

.nail-empty-state h2 {
  margin: 0 0 7px;
}

.nail-empty-state p {
  margin: 0;
  color: var(--nail-muted);
}

.nail-form-page,
.nail-content-page,
.nail-single,
.nail-account-panel {
  max-width: 760px;
  margin: 0 auto;
}

.nail-form-card label,
.nail-form-card fieldset {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.nail-form-card input,
.nail-form-card select,
.nail-form-card textarea,
.nail-filter-bar input,
.nail-filter-bar select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--nail-border);
  border-radius: 10px;
  background: #fff;
}

.nail-form-grid {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
}

.nail-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.nail-pin-reveal strong {
  font-size: 42px;
  letter-spacing: 8px;
}

.nail-content-page__image {
  width: 100%;
  height: auto;
}

.nail-content-page__body {
  line-height: 1.7;
}

.nail-status-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eee;
  font-size: 12px;
  font-weight: 700;
}

.nail-status-badge--published {
  background: #dcfae6;
  color: #05603a;
}

.nail-status-badge--pending_review {
  background: #fff3cd;
  color: #775b00;
}

.nail-status-badge--rejected {
  background: #fee4e2;
  color: #912018;
}

@media (max-width: 600px) {
  .nail-form-page,
  .nail-content-page,
  .nail-single,
  .nail-account-panel {
    width: 100%;
  }

  .nail-form-card {
    border-radius: 0;
  }

  .nail-form-grid {
    grid-template-columns: 1fr 100px;
  }
}

.nail-nickname-field span {
  color: var(--nail-muted);
  font-size: 0.9em;
  font-weight: 500;
}

.nail-nickname-field small {
  color: var(--nail-muted);
  font-size: 13px;
  line-height: 1.45;
}

.nail-nickname-preview {
  display: grid;
  gap: 4px;
  margin: -4px 0 20px;
  padding: 13px 15px;
  border: 1px solid #eadfe6;
  border-radius: 12px;
  background: var(--nail-brand-soft);
}

.nail-nickname-preview span {
  color: var(--nail-muted);
  font-size: 12px;
}

.nail-nickname-preview strong {
  color: var(--nail-brand-dark);
  font-size: 16px;
}