/* Create Page Styles
   ── these were silently unstyled once. A stray skeleton-class rule with an
   opening brace and no body sat above this comment and swallowed the whole block
   inside one rule, so every selector here was dead and the page rendered
   unstyled — CSS parses on, it does not error. If Create ever looks bare again,
   count the braces first. */
#view .create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 0.5px solid var(--separator);
  position: sticky;
  top: 0;
  z-index: 10;
}

#view .create-back-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

#view .create-back-btn svg {
  width: 20px;
  height: 20px;
  color: var(--label);
}

#view .create-back-btn:active {
  transform: scale(0.92);
  background: var(--fill-2);
}

/* The back chevron points the way back, and in a right-to-left page that is the
   other way. Only the Create page is translated so far, so this is scoped to the
   `dir` attribute that page sets rather than to the document. */
[dir="rtl"] .create-back-btn svg {
  transform: scaleX(-1);
}

/* The Create page's upload limit, as derived text: the type list comes from
   `UPLOAD_TYPES` and the size from `UPLOAD_MAX_BYTES`, so the sentence and the
   `accept` attribute cannot disagree. */
#view .create-upload-progress {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--label-2);
}

/* The refusal sits under the box it is about, and only exists when it has
   something to say - it is `hidden` in the markup and `role="alert"`. The
   `[hidden]` rule has to be repeated: an author `display` beats the user
   agent's, so without it the empty box would be laid out on every page. */
#view #dzuploaderror {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

#view #dzuploaderror[hidden] {
  display: none;
}

/* What the network is, and what submitting will cost, above the button that
   spends it. Both figures are the server's: the badge comes from the health
   read and the fee from a simulation of this exact mint. */
#view .create-net {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--fill);
}

#view .create-net-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--label);
}

#view .create-net .create-field-hint {
  margin-top: 4px;
}

#view .create-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

#view .create-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

#view .create-logo-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--label);
}

#view .create-notification-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

#view .create-notification-btn svg {
  width: 20px;
  height: 20px;
  color: var(--label);
}

#view .create-notification-btn:active {
  transform: scale(0.92);
  background: var(--fill-2);
}

#view .create-body {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

#view .create-title-section {
  text-align: center;
  margin-bottom: 24px;
}

#view .create-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--label);
  margin: 0 0 8px;
}

#view .create-subtitle {
  font-size: 14px;
  color: var(--label-2);
  margin: 0;
}

#view .create-wallet-warning {
  background: #fff8eb;
  border: 1px solid #ffe2aa;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

#view .create-warning-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: rgba(255, 149, 0, 0.1);
  display: grid;
  place-items: center;
  flex: none;
}

#view .create-warning-icon svg {
  width: 20px;
  height: 20px;
  color: #f59e0b;
}

#view .create-warning-content {
  flex: 1;
}

#view .create-warning-title {
  font-weight: 750;
  font-size: 14px;
  color: #92400e;
  margin-bottom: 4px;
}

#view .create-warning-text {
  font-size: 13px;
  color: #b45309;
}

#view .create-warning-btn {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: #f59e0b;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

#view .create-warning-btn:active {
  transform: scale(0.96);
  background: #d97706;
}

#view .create-section {
  margin-bottom: 32px;
}

#view .create-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

#view .create-section-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
}

#view .create-section-title {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--label);
}

#view .create-section-desc {
  font-size: 13px;
  color: var(--label-2);
  margin-bottom: 16px;
}

#view .create-upload {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

#view .create-upload-box {
  flex: 1;
  border: 2px dashed var(--separator);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

#view .create-upload-box:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

#view .create-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#view .create-upload-icon {
  width: 48px;
  height: 48px;
  color: var(--label-2);
}

#view .create-upload-text {
  font-weight: 650;
  font-size: 15px;
  color: var(--label);
}

#view .create-upload-formats {
  font-size: 12px;
  color: var(--label-2);
}

#view .create-upload-preview {
  width: 120px;
  height: 120px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  flex: none;
  background: var(--fill);
}

#view .create-preview-image {
  width: 100%;
  height: 100%;
}

#view .create-preview-image img,
#view .create-preview-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view .create-preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s;
}

#view .create-preview-remove svg {
  width: 14px;
  height: 14px;
  color: #fff;
}

#view .create-preview-remove:active {
  transform: scale(0.9);
}

#view .create-field {
  margin-bottom: 20px;
}

#view .create-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 650;
  color: var(--label);
}

#view .create-field input,
#view .create-field textarea,
#view .create-field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--fill);
  border: 1px solid var(--separator);
  font-size: 16px;
  color: var(--label);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}

#view .create-field input:focus,
#view .create-field textarea:focus,
#view .create-field select:focus {
  border-color: var(--accent);
  background: #fff;
}

#view .create-field textarea {
  resize: vertical;
  min-height: 100px;
}

#view .create-char-count {
  text-align: right;
  font-size: 12px;
  color: var(--label-3);
  margin-top: 4px;
}

#view .create-field-hint {
  font-size: 12px;
  color: var(--label-2);
  margin-top: 4px;
}

/*
 * The "Not available yet" block, and the disabled controls it explains.
 *
 * These exist because a control that accepts input and does nothing is worse than
 * one that is visibly unavailable: the first looks like a feature, and the page
 * cannot say so. So every field this section cannot honour is `disabled`, and the
 * reason is printed next to it in the ordinary type of the page rather than in a
 * tooltip nobody opens.
 *
 * `disabled` is also the accessible half. A greyed-out control is announced as
 * unavailable by VoiceOver and cannot be focused, so the reason beside it is not
 * decoration - for a screen reader it is the only way to find out why.
 */
#view .create-note {
  margin: 12px 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 16px);
  font-size: 13px;
  line-height: 1.45;
  color: var(--label);
}
/* The colours come from `.note.warn` further down this file. Only the shape is
   here: copying the amber into a second rule would be a second copy of a colour
   that a change to the palette would then have to reach in two places. */

/* A disabled field: dimmed, and visibly not something to type into. */
#view .create-field input:disabled,
#view .create-field select:disabled,
#view .create-field textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  -webkit-text-fill-color: var(--label-3);
}

/* The offers switch, off because nothing can turn it on. */
#view .create-toggle-off {
  cursor: not-allowed;
  opacity: 0.45;
}

#view .create-toggle {
  margin-top: 16px;
}

#view .create-toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

#view .create-toggle-label input[type="checkbox"] {
  display: none;
}

#view .create-toggle-slider {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--fill);
  border: 1px solid var(--separator);
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}

#view .create-toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#view .create-toggle-label input:checked + .create-toggle-slider {
  background: var(--accent);
  border-color: var(--accent);
}

#view .create-toggle-label input:checked + .create-toggle-slider::before {
  transform: translateX(20px);
}

#view .create-toggle-text {
  font-weight: 650;
  font-size: 15px;
  color: var(--label);
}

#view .create-toggle-desc {
  font-size: 13px;
  color: var(--label-2);
  margin-top: 6px;
  margin-left: 60px;
}

#view .create-security {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(79, 70, 229, 0.08));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius);
  padding: 20px;
  margin: 32px 0;
}

#view .create-security-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: rgba(124, 58, 237, 0.15);
  display: grid;
  place-items: center;
  flex: none;
}

#view .create-security-icon svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}

#view .create-security-content {
  flex: 1;
}

#view .create-security-title {
  font-weight: 750;
  font-size: 15px;
  color: var(--label);
  margin-bottom: 4px;
}

#view .create-security-text {
  font-size: 13px;
  color: var(--label-2);
}

#view .create-security-pi {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex: none;
}

#view .create-btn {
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.28);
}

#view .create-btn:active {
  transform: scale(0.985);
  background: var(--accent-press);
}

#view .create-btn:disabled {
  background: var(--fill-2);
  color: var(--label-3);
  box-shadow: none;
  cursor: not-allowed;
}

#view .create-btn-icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 480px) {
  #view .create-upload {
    flex-direction: column;
  }

  #view .create-upload-preview {
    width: 100%;
    height: 200px;
  }
}

.skel {
  border-radius: 14px;
  background: linear-gradient(90deg, var(--fill) 22%, var(--fill-2) 42%, var(--fill) 62%);
  background-size: 300% 100%;
  animation: shimmer 1.15s ease-in-out infinite;
}

.empty {
  padding: 48px 28px;
  text-align: center;
}
.empty .mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.empty .mark svg { width: 30px; height: 30px; }
.empty h4 { margin: 0 0 6px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.empty p { margin: 0 auto 16px; max-width: 30ch; font-size: 14px; color: var(--label-2); }

.note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.5;
}
.note b { color: var(--label); }
.note.warn { background: rgba(255, 149, 0, 0.09); color: #8a5200; }
.note.warn b { color: #6e4200; }
.note.bad { background: rgba(255, 59, 48, 0.08); color: #a51d15; }
.note.bad b { color: #861710; }

/* The mint review: what will be minted, what it will cost, and who will own it.
   It lives in the sheet rather than the view, so it is not scoped to `#view`. */
.rev-art {
  margin: 4px 0 14px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--fill);
}

.rev-art img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.rev {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--fill);
  overflow: hidden;
}

.rev-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  font-size: 14px;
}

.rev-row + .rev-row {
  border-top: 1px solid var(--separator, rgba(60, 60, 67, 0.12));
}

.rev-row > span:first-child {
  color: var(--label-2);
  flex: none;
}

.rev-row > span:last-child {
  font-weight: 600;
  text-align: end;
  overflow-wrap: anywhere;
}