#luansui-ticket {
  --lut-depth-line: #dce7f5;
  --lut-depth-ink: #18345a;
  --lut-depth-shadow: 0 8px 24px rgba(28, 63, 118, .07);
}

#luansui-ticket .lut-heading {
  padding: 22px clamp(16px, 2.8vw, 34px);
  border: 1px solid #cddff6;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 96% 0%, #bed7fb 0, transparent 59%),
    linear-gradient(112deg, #f8fbff, #e9f3ff 68%, #dceaff);
  box-shadow: var(--lut-depth-shadow);
}

#luansui-ticket .lut-heading h1 {
  width: fit-content;
  max-width: 100%;
  color: var(--lut-depth-ink);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 650;
}

#luansui-ticket .lut-heading p {
  color: #435d7d;
}

#luansui-ticket .lut-heading > .lut-button {
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(36, 102, 212, .16);
}

#luansui-ticket :is(.lut-button, .lut-toolbar .el-input__inner) {
  border-radius: 8px;
}

#luansui-ticket .lut-panel {
  border-color: var(--lut-depth-line);
  border-radius: 14px;
  box-shadow: var(--lut-depth-shadow);
}

#luansui-ticket .lut-tabs {
  gap: 4px 8px;
  background: linear-gradient(#fff, #f6f9ff);
}

#luansui-ticket .lut-tabs button {
  padding-inline: 10px;
}

#luansui-ticket .lut-tabs button:is(.active, :hover) {
  color: #1e56b5;
  background: #edf4ff;
}

#luansui-ticket .lut-tabs button.active .lut-count {
  background: #dbeaff;
}

#luansui-ticket .lut-tabs button:focus-visible {
  outline-offset: -4px;
}

#luansui-ticket .lut-toolbar {
  background: #f9fbff;
  border-bottom: 1px solid #eaf0f8;
}

#luansui-ticket .lut-list-heading {
  padding-top: 14px;
  color: var(--lut-depth-ink);
  font-weight: 650;
}

#luansui-ticket .lut-table th {
  background: #edf4ff;
  color: #36567f;
  font-weight: 600;
}

#luansui-ticket .lut-row:is(:hover, :focus-within) {
  background: #f0f6ff;
}

#luansui-ticket .lut-status {
  border-radius: 7px;
}

@media (max-width: 600px) {
  #luansui-ticket .lut-heading {
    flex-wrap: wrap;
    padding: 16px;
  }

  #luansui-ticket .lut-heading p {
    max-width: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #luansui-ticket .lut-heading h1 {
    animation: lut-depth-title-in 600ms cubic-bezier(.24,.65,.25,1);
  }

  #luansui-ticket .lut-panel {
    animation: lut-depth-panel-in 430ms ease-out 100ms backwards;
  }

  #luansui-ticket .lut-panel:focus-within {
    animation: none;
  }

  @keyframes lut-depth-title-in {
    from { clip-path: inset(-5px 100% -5px 0); }
    to { clip-path: inset(-5px 0 -5px 0); }
  }

  @keyframes lut-depth-panel-in {
    from { opacity: .45; translate: 0 9px; }
    to { opacity: 1; translate: 0 0; }
  }
}