/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* Global app theme defaults */
  color-scheme: light;
  font-family: "SF Pro Display", "Segoe UI", sans-serif;
  background-color: #0b1330;
  color: #f4f7ff;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-shell-padding: 16px;
  --app-shell-padding-tight: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  /* App-level canvas and layout container */
  margin: 0;
  padding:
    calc(var(--app-shell-padding) + var(--app-safe-top))
    calc(var(--app-shell-padding) + var(--app-safe-right))
    calc(var(--app-shell-padding) + var(--app-safe-bottom))
    calc(var(--app-shell-padding) + var(--app-safe-left));
  background:
    radial-gradient(circle at top left, rgba(59, 108, 255, 0.22), transparent 34%),
    radial-gradient(circle at bottom center, rgba(140, 100, 255, 0.14), transparent 32%),
    linear-gradient(180deg, #0d1534 0%, #091126 100%);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.container {
  /* Base white card container for non-index pages */
  max-width: 640px;
  margin: 0 auto;
  background-color: #ffffff;
  color: #1b1f23;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(14, 18, 22, 0.08);
  flex: 1;
}

.wishlist-index-page {
  /* Main screen container overrides: transparent shell + shared horizontal inset */
  max-width: 760px;
  padding: 16px 14px 32px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  --index-content-inline-padding: 14px;
}

h1 {
  /* Generic h1 fallback */
  font-size: 22px;
  margin: 0 0 16px;
}

.actions {
  /* Standard action row spacing */
  margin: 16px 0;
}

.button {
  /* Shared button surface aligned with sandbox card actions */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background-color: #2a7bf6;
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-align: center;
}

.button-secondary {
  /* Secondary generic button variant */
  background-color: transparent;
  border-color: rgba(61, 45, 24, 0.12);
  color: #1c3c74;
}

.field {
  /* Form field wrapper spacing */
  margin-bottom: 12px;
}

.field label {
  /* Form label style */
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #4a4f56;
}

.field input,
.field textarea,
.field select {
  /* Shared form controls style */
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d4d8de;
  font-size: 14px;
  box-sizing: border-box;
}

.flash {
  /* Flash message container */
  max-width: 640px;
  margin: 0 auto 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}

.flash-notice {
  /* Informational/success flash tone */
  background-color: #e7f0ff;
  color: #1c3c74;
}

.flash-alert {
  /* Error flash tone */
  background-color: #ffe7e7;
  color: #802323;
}

.error-message {
  /* Inline validation error text */
  color: #b42318;
  font-size: 12px;
  margin-top: 4px;
}

.wishlist-card {
  /* Standard card used on wishlist detail pages */
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e6e9ee;
  background-color: #fafbfc;
  margin-bottom: 12px;
}

.breadcrumb {
  /* Back link / breadcrumb spacing */
  margin-bottom: 10px;
}

.link-muted {
  /* Neutral link appearance */
  color: #4a4f56;
  text-decoration: none;
  font-size: 13px;
}

.link-danger {
  /* Destructive action link color */
  color: #b42318;
}

.wishlist-header {
  /* Header spacing on wishlist detail page */
  margin-bottom: 20px;
}

.wishlist-meta {
  /* Meta line under wishlist title (date/privacy/etc) */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #5a6068;
}

.wishlist-description {
  /* Wishlist description paragraph */
  margin-top: 10px;
  font-size: 14px;
  color: #2c3138;
}

.wish-item-form {
  /* Card that wraps add/edit wish item form */
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 12px;
  background-color: #f3f6fb;
  border: 1px solid #e1e6ee;
}

.wish-item-form h2 {
  /* Wish form heading */
  margin: 0 0 12px;
  font-size: 18px;
}

.wish-items {
  /* Vertical list of wish item cards */
  display: grid;
  gap: 16px;
}

.wish-item-card {
  /* Single wish item card */
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e6e9ee;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(14, 18, 22, 0.06);
}

.wish-item-card.is-dragging {
  /* Drag-and-drop transient visual state */
  opacity: 0.6;
  border-style: dashed;
}

.wish-item-header {
  /* Top row in wish item card: title + actions */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wish-item-title {
  /* Wish item title text */
  font-size: 16px;
  margin-right: 8px;
}

.wish-item-actions {
  /* Action controls group for wish item */
  display: flex;
  gap: 12px;
}

.wish-item-actions form {
  /* Remove default form margin inside action row */
  margin: 0;
}

.wish-item-actions button.link-muted {
  /* Make icon/text action buttons look like links */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.wish-item-description {
  /* Body text for wish item */
  margin: 10px 0;
  color: #2c3138;
}

.wish-item-link a {
  /* External URL style inside wish item */
  color: #1c3c74;
  text-decoration: underline;
  font-size: 13px;
}

.wish-item-image img {
  /* Optional image preview in wish item */
  margin-top: 10px;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #e1e6ee;
}

.status-chip {
  /* Base pill for status labels */
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background-color: #eef2f8;
  color: #3d4752;
}

.status-free {
  /* Free status color mapping */
  background-color: #eaf6ed;
  color: #1f6f38;
}

.status-reserved {
  /* Reserved status color mapping */
  background-color: #fff4e5;
  color: #8a4b11;
}

.status-bought {
  /* Bought status color mapping */
  background-color: #e9ecf9;
  color: #1e2d75;
}

.wish-item-status-form {
  /* Status update block separator */
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef1f4;
}

.inline-fields {
  /* Form grid for compact inline controls */
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .inline-fields {
    /* Two-column fields on wider screens */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app-footer {
  /* Footer with app version / caption */
  margin: 12px auto 0;
  max-width: 640px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: rgba(224, 232, 255, 0.62);
  padding-bottom: 16px;
}

.hero-header {
  /* Main screen hero: two columns (brand + profile) */
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 2px;
  padding-inline: var(--index-content-inline-padding);
}

.brand-block {
  /* Left hero block with app title and supporting copy */
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.brand-copy {
  /* Width guard for title/tagline to match mobile composition */
  max-width: 192px;
  padding-top: 1px;
}

.page-title {
  /* Main app name typography */
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #ffffff;
}

.page-title span {
  /* Keep title chunks on one visual baseline */
  display: inline-block;
}

.page-title-accent {
  /* Accent color for "WishList" */
  color: #73bdff;
}

.hero-tagline {
  /* Supporting hero text */
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.38;
  color: #adb6d8;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.profile-block {
  /* Right hero block with avatar and handle */
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding-top: 0;
}

.profile-avatar-wrap {
  /* Avatar anchor for possible overlays/future badges */
  position: relative;
}

.profile-avatar {
  /* User avatar size and appearance */
  width: clamp(108px, 17vw, 122px);
  height: clamp(108px, 17vw, 122px);
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 28px rgba(5, 11, 28, 0.28);
  background:
    linear-gradient(135deg, rgba(130, 156, 255, 0.8), rgba(110, 229, 212, 0.62)),
    rgba(255, 255, 255, 0.08);
}

.profile-avatar-fallback {
  /* Initials avatar when no photo is available */
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 700;
  color: #f9fbff;
}

.profile-meta {
  /* Handle text alignment under avatar */
  text-align: center;
}

.profile-handle {
  /* Telegram handle / profile label */
  max-width: 126px;
  font-size: 15px;
  line-height: 1.2;
  color: #adb6d8;
  font-weight: 500;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.primary-action {
  /* Wrapper around main CTA */
  margin: 10px 0 28px;
  padding-inline: var(--index-content-inline-padding);
}

.hero-button {
  /* Main CTA: create new wishlist */
  width: min(100%, 302px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 39px;
  padding: 10px 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, #57a7ff 0%, #a68cff 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  box-shadow: 0 18px 30px rgba(92, 126, 255, 0.24);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.hero-button:hover,
.hero-button:focus-visible {
  /* CTA hover/focus feedback */
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 22px 30px rgba(92, 126, 255, 0.3);
}

.hero-button:active {
  /* CTA pressed state */
  transform: translateY(1px) scale(0.995);
}

.hero-button-icon {
  /* Plus icon sizing in CTA */
  font-size: 21px;
  line-height: 1;
  font-weight: 500;
}

.wishlist-section {
  /* Section wrapper for title + list card */
  margin-top: 0;
}

.section-title {
  /* "Мои списки желаний" heading */
  margin: 0 0 14px;
  padding-inline: var(--index-content-inline-padding);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.wishlist-shell {
  /* Shared card surface for wishlist list and empty state */
  overflow: hidden;
  border-radius: 20px;
  background: rgba(21, 31, 69, 0.76);
  border: 1px solid rgba(146, 170, 255, 0.08);
  box-shadow: 0 22px 54px rgba(3, 8, 28, 0.36);
  backdrop-filter: blur(10px);
}

.wishlist-row {
  /* Single row in wishlists list */
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 16px 14px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.wishlist-row + .wishlist-row {
  /* Subtle separator between rows */
  border-top: 1px solid rgba(145, 167, 242, 0.08);
}

.wishlist-row:hover,
.wishlist-row:focus-visible {
  /* Hover/focus row feedback */
  background-color: rgba(255, 255, 255, 0.03);
}

.wishlist-row:active {
  /* Pressed row feedback */
  transform: scale(0.997);
}

.wishlist-dot {
  /* Leading color marker for each wishlist */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), var(--wishlist-accent));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 14px rgba(90, 129, 255, 0.14);
}

.wishlist-copy {
  /* Text column container in row */
  min-width: 0;
}

.wishlist-name,
.wishlist-meta-line {
  /* Keep both text lines as block-level */
  display: block;
}

.wishlist-name {
  /* Wishlist title line (max two lines) */
  font-size: 15px;
  font-weight: 700;
  color: #fbfcff;
  display: -webkit-box;
  overflow: hidden;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wishlist-meta-line {
  /* Secondary metadata line (items count) */
  margin-top: 4px;
  font-size: 14px;
  color: #adb6d8;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.wishlist-chevron {
  /* Trailing chevron icon */
  font-size: 26px;
  line-height: 1;
  color: #93a3d8;
}

.wishlist-shell-empty {
  /* Empty state layout within list shell */
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 32px 22px 30px;
  text-align: center;
}

.empty-illustration {
  /* Empty state decorative icon container */
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(87, 167, 255, 0.24), rgba(166, 140, 255, 0.26));
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 12px 24px rgba(82, 112, 229, 0.18);
}

.empty-illustration-action {
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.empty-illustration-action:hover,
.empty-illustration-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(82, 112, 229, 0.24);
  background: linear-gradient(135deg, rgba(87, 167, 255, 0.34), rgba(166, 140, 255, 0.36));
}

.empty-illustration-action:active {
  transform: translateY(0);
}

.empty-title {
  /* Empty state title */
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #fbfcff;
}

.empty-text {
  /* Empty state explanatory text */
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(214, 223, 248, 0.74);
  max-width: 320px;
}

@media (max-width: 720px) {
  body {
    /* Slightly tighter outer gutter on tablets/small screens */
    padding:
      calc(var(--app-shell-padding-tight) + var(--app-safe-top))
      calc(var(--app-shell-padding-tight) + var(--app-safe-right))
      calc(var(--app-shell-padding-tight) + var(--app-safe-bottom))
      calc(var(--app-shell-padding-tight) + var(--app-safe-left));
  }

  .wishlist-index-page {
    /* Preserve desktop rhythm with reduced frame padding */
    padding: 12px 10px 24px;
    --index-content-inline-padding: 14px;
  }

  .hero-header {
    /* Keep two-column hero, shrink spacing */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
  }

  .primary-action {
    /* Maintain vertical rhythm after hero on smaller screens */
    margin-bottom: 24px;
  }
}

@media (max-width: 520px) {
  .container {
    /* Base card pages keep readable inner padding */
    padding: 18px 18px;
  }

  .wishlist-index-page {
    /* Match sandbox phone-frame rhythm instead of stretching edge-to-edge */
    max-width: min(100%, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 68px));
    padding: 10px 0 20px;
    --index-content-inline-padding: 14px;
  }

  .hero-header {
    /* Tighter hero gap on narrow devices */
    gap: 12px;
  }

  .brand-copy {
    /* Prevent title/tagline from colliding with avatar */
    max-width: 168px;
  }

  .hero-tagline {
    /* Slightly smaller supporting text */
    font-size: 15px;
  }

  .profile-avatar {
    /* Avatar tune for narrow screen proportion */
    width: 110px;
    height: 110px;
  }

  .primary-action {
    /* Keep CTA spacing consistent with list block */
    margin-bottom: 24px;
  }

  .profile-handle {
    /* Handle width and size limits for mobile */
    max-width: 112px;
    font-size: 14px;
  }

  .hero-button {
    /* CTA max-width and stable reduced height on mobile */
    width: min(100%, 268px);
    min-height: 39px;
  }

  .wishlist-row {
    /* Keep sandbox row spacing on mobile */
    padding: 16px 14px;
    gap: 16px;
  }

  .wishlist-name {
    /* Mobile title size */
    font-size: 15px;
  }

  .wishlist-detail-page {
    max-width: min(100%, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 84px));
    padding: 12px 0 30px;
  }

  .modal-card,
  .modal-card-form {
    width: min(100%, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 84px));
    max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 84px);
  }
}

.flash {
  max-width: 760px;
}

.wishlist-detail-page {
  max-width: 760px;
  padding: 14px 14px 40px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #f4f7ff;
}

.hero-wishlist {
  position: relative;
  gap: 12px;
  padding: 22px 56px 12px 18px;
  border: 1px solid rgba(150, 170, 255, 0.08);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    rgba(20, 29, 69, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-top-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.back-icon {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
}

.back-icon::before,
.back-icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.back-icon::before {
  top: 7px;
  left: 4px;
  width: 18px;
  height: 2px;
  background: #a8b1d4;
}

.back-icon::after {
  top: 1px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: transparent;
  border-top: 2px solid #a8b1d4;
  border-left: 2px solid #a8b1d4;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.hero-wishlist h1 {
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #ffffff;
}

.hero-wishlist > p {
  margin: 0;
  color: #adb6d8;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.38;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(150, 170, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d5defd;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.meta-chip-strong {
  background: rgba(110, 164, 255, 0.14);
  color: #f4f7ff;
}

.hero-cta {
  margin: 16px 0 10px;
}

.cta {
  display: block;
  margin: 0;
  padding: 15px 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, #57a7ff 0%, #a68cff 100%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  box-shadow: 0 18px 32px rgba(102, 121, 255, 0.24);
}

.cta-full {
  width: 100%;
}

.drag-hint {
  margin: 0 0 14px;
  color: #adb6d8;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wish-items-panel {
  display: grid;
  gap: 18px;
}

.item-panel {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(150, 170, 255, 0.08);
  background: rgba(21, 31, 69, 0.8);
  box-shadow: 0 22px 54px rgba(3, 8, 28, 0.36);
  scroll-margin-top: 18px;
}

.item-panel.is-dragging {
  opacity: 0.62;
  border-style: dashed;
}

.edit-control {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #b8c1e4;
  text-decoration: none;
}

.edit-control-icon {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transform: scaleX(-1);
}

.badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #b8c1e4;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle-icon,
.drag-handle-icon::before,
.drag-handle-icon::after {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 -6px 0 currentColor,
    0 6px 0 currentColor;
}

.drag-handle-icon {
  position: relative;
}

.drag-handle-icon::before,
.drag-handle-icon::after {
  content: "";
  position: absolute;
  top: 0;
}

.drag-handle-icon::before {
  left: -6px;
}

.drag-handle-icon::after {
  left: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #d5defd;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.badge-status-free {
  background: rgba(57, 139, 85, 0.18);
  color: #c2f0ce;
}

.badge-status-reserved {
  background: rgba(159, 96, 30, 0.22);
  color: #ffd6a8;
}

.badge-status-bought {
  background: rgba(95, 111, 201, 0.24);
  color: #dbe2ff;
}

.item-panel h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.item-panel > p {
  margin: 0 0 14px;
  color: #adb6d8;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.5;
}

.item-details {
  margin-top: 4px;
}

.item-details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: #f4f7ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.item-details-toggle::-webkit-details-marker {
  display: none;
}

.item-details-toggle::after {
  content: "›";
  color: #93a3d8;
  font-size: 20px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.item-details[open] .item-details-toggle::after {
  transform: rotate(-90deg);
}

.field-preview {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.field {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(150, 170, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.field strong,
.field span {
  display: block;
}

.field strong {
  margin-bottom: 6px;
  color: #adb6d8;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.field span {
  color: #f4f7ff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  word-break: break-word;
}

.field span a {
  color: #b9d4ff;
}

.item-details-actions {
  margin-top: 14px;
}

.danger-zone {
  margin-top: 24px;
}

.button-primary {
  background: #6ea4ff;
  color: #fff;
}

.button-danger {
  width: 100%;
  border-color: rgba(255, 110, 118, 0.22);
  background: rgba(124, 20, 34, 0.28);
  color: #ff8f97;
}

.button-compact {
  padding: 11px 14px;
  border-radius: 16px;
}

.button_to {
  margin: 0;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(24px + var(--app-safe-top))
    calc(16px + var(--app-safe-right))
    calc(24px + var(--app-safe-bottom))
    calc(16px + var(--app-safe-left));
  background: rgba(4, 8, 22, 0.62);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-card {
  width: 100%;
  max-width: 360px;
  padding: 22px 18px 18px;
  max-height: min(
    calc(100dvh - 48px - var(--app-safe-top) - var(--app-safe-bottom)),
    100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(26, 37, 82, 0.98), rgba(17, 24, 55, 0.98));
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}

.modal-card h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.modal-card p {
  margin: 0;
  color: #adb6d8;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.5;
}

.modal-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 143, 151, 0.14);
  color: #ff9ca3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.modal-eyebrow-primary {
  background: rgba(110, 164, 255, 0.16);
  color: #a8c8ff;
}

.modal-card-form {
  max-width: 372px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.modal-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.modal-form-field {
  display: grid;
  gap: 8px;
}

.modal-form-label {
  color: #dbe4ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-input {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: 1px solid rgba(150, 170, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4f7ff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  outline: none;
  box-sizing: border-box;
}

.modal-input::placeholder {
  color: rgba(219, 228, 255, 0.45);
}

.modal-input:focus {
  border-color: rgba(110, 164, 255, 0.48);
  box-shadow: 0 0 0 4px rgba(110, 164, 255, 0.12);
}

.modal-textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.modal-select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #a8b6e6 50%) calc(100% - 22px) calc(50% - 2px) / 8px 8px no-repeat,
    linear-gradient(135deg, #a8b6e6 50%, transparent 50%) calc(100% - 16px) calc(50% - 2px) / 8px 8px no-repeat,
    rgba(255, 255, 255, 0.05);
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-hint {
  color: rgba(214, 223, 248, 0.72);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.modal-target {
  margin: 16px 0 18px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

.modal-target strong,
.modal-target span {
  display: block;
}

.modal-target strong {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.modal-target span {
  color: #adb6d8;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-form .modal-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  padding-bottom: 2px;
  margin-top: 4px;
  background:
    linear-gradient(180deg, rgba(17, 24, 55, 0), rgba(17, 24, 55, 0.96) 24%, rgba(17, 24, 55, 0.98));
}

.modal-actions .button,
.modal-actions .button_to {
  width: 100%;
}

.modal-actions .button-secondary {
  border-color: rgba(150, 170, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f7ff;
}

.modal-actions .button-danger {
  background: rgba(146, 29, 45, 0.48);
  color: #ffb0b6;
}

.modal-actions-compact .button {
  padding: 11px 14px;
  border-radius: 16px;
}

.modal-form .error-message {
  margin-top: -2px;
  color: #ffb4bb;
}

@media (max-width: 720px) {
  .wishlist-detail-page {
    padding: 12px 8px 30px;
  }
}

@media (max-width: 520px) {
  .hero-wishlist {
    padding: 20px 48px 12px 16px;
  }

  .hero-wishlist h1 {
    font-size: 24px;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    align-items: flex-start;
    padding:
      calc(14px + var(--app-safe-top))
      calc(10px + var(--app-safe-right))
      calc(14px + var(--app-safe-bottom))
      calc(10px + var(--app-safe-left));
  }

  .modal-card {
    padding: 18px 16px 16px;
    border-radius: 24px;
    max-height: min(
      calc(100dvh - 28px - var(--app-safe-top) - var(--app-safe-bottom)),
      100%
    );
  }

  .modal-card h2 {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .modal-card p,
  .modal-hint,
  .modal-target span {
    font-size: 14px;
  }

  .modal-form {
    gap: 12px;
    margin-top: 16px;
  }

  .modal-input {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 16px;
  }

  .modal-textarea {
    min-height: 84px;
  }

  .modal-actions {
    gap: 10px;
  }

  .modal-actions .button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}