/* 实用工具类 */

/* 1. 阴影 */
.shadow-sm {
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
}

.shadow-xl {
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.2);
}

.shadow-none {
  box-shadow: none;
}

.shadow-primary {
  box-shadow: 0 0.1rem 0.3rem rgba(70, 213, 190, 0.3);
}

.shadow-accent {
  box-shadow: 0 0.1rem 0.3rem rgba(141, 153, 174, 0.3);
}

.shadow-danger {
  box-shadow: 0 0.1rem 0.3rem rgba(255, 107, 107, 0.3);
}

.shadow-warning {
  box-shadow: 0 0.1rem 0.3rem rgba(255, 209, 102, 0.3);
}

.shadow-success {
  box-shadow: 0 0.1rem 0.3rem rgba(78, 205, 196, 0.3);
}

.shadow-purple {
  box-shadow: 0 0.1rem 0.3rem rgba(155, 93, 229, 0.3);
}

.shadow-pink {
  box-shadow: 0 0.1rem 0.3rem rgba(241, 91, 181, 0.3);
}

.shadow-orange {
  box-shadow: 0 0.1rem 0.3rem rgba(249, 87, 56, 0.3);
}

.shadow-teal {
  box-shadow: 0 0.1rem 0.3rem rgba(0, 187, 180, 0.3);
}

/* 2. 圆角 */
.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: 0.05rem;
}

.rounded {
  border-radius: 0.1rem;
}

.rounded-md {
  border-radius: 0.15rem;
}

.rounded-lg {
  border-radius: 0.2rem;
}

.rounded-xl {
  border-radius: 0.3rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-t-sm {
  border-top-left-radius: 0.05rem;
  border-top-right-radius: 0.05rem;
}

.rounded-t {
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
}

.rounded-t-md {
  border-top-left-radius: 0.15rem;
  border-top-right-radius: 0.15rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
}

.rounded-t-xl {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.rounded-t-full {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}

.rounded-b-none {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-b-sm {
  border-bottom-right-radius: 0.05rem;
  border-bottom-left-radius: 0.05rem;
}

.rounded-b {
  border-bottom-right-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}

.rounded-b-md {
  border-bottom-right-radius: 0.15rem;
  border-bottom-left-radius: 0.15rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.rounded-b-full {
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

/* 3. 边框 */
.border {
  border: 1px solid var(--border-color);
}

.border-0 {
  border: 0;
}

.border-t {
  border-top: 1px solid var(--border-color);
}

.border-r {
  border-right: 1px solid var(--border-color);
}

.border-b {
  border-bottom: 1px solid var(--border-color);
}

.border-l {
  border-left: 1px solid var(--border-color);
}

.border-primary {
  border-color: var(--primary-color);
}

.border-secondary {
  border-color: var(--secondary-color);
}

.border-success {
  border-color: var(--success-color);
}

.border-danger {
  border-color: var(--danger-color);
}

.border-warning {
  border-color: var(--warning-color);
}

.border-info {
  border-color: var(--info-color);
}

.border-light {
  border-color: var(--light-color);
}

.border-dark {
  border-color: var(--dark-color);
}

.border-white {
  border-color: #fff;
}

/* 4. 间距 */
.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.1rem;
}

.m-2 {
  margin: 0.2rem;
}

.m-3 {
  margin: 0.3rem;
}

.m-4 {
  margin: 0.4rem;
}

.m-5 {
  margin: 0.5rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.1rem;
}

.mt-2 {
  margin-top: 0.2rem;
}

.mt-3 {
  margin-top: 0.3rem;
}

.mt-4 {
  margin-top: 0.4rem;
}

.mt-5 {
  margin-top: 0.5rem;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.1rem;
}

.mr-2 {
  margin-right: 0.2rem;
}

.mr-3 {
  margin-right: 0.3rem;
}

.mr-4 {
  margin-right: 0.4rem;
}

.mr-5 {
  margin-right: 0.5rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.1rem;
}

.mb-2 {
  margin-bottom: 0.2rem;
}

.mb-3 {
  margin-bottom: 0.3rem;
}

.mb-4 {
  margin-bottom: 0.4rem;
}

.mb-5 {
  margin-bottom: 0.5rem;
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 0.1rem;
}

.ml-2 {
  margin-left: 0.2rem;
}

.ml-3 {
  margin-left: 0.3rem;
}

.ml-4 {
  margin-left: 0.4rem;
}

.ml-5 {
  margin-left: 0.5rem;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.1rem;
}

.p-2 {
  padding: 0.2rem;
}

.p-3 {
  padding: 0.3rem;
}

.p-4 {
  padding: 0.4rem;
}

.p-5 {
  padding: 0.5rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.1rem;
}

.pt-2 {
  padding-top: 0.2rem;
}

.pt-3 {
  padding-top: 0.3rem;
}

.pt-4 {
  padding-top: 0.4rem;
}

.pt-5 {
  padding-top: 0.5rem;
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: 0.1rem;
}

.pr-2 {
  padding-right: 0.2rem;
}

.pr-3 {
  padding-right: 0.3rem;
}

.pr-4 {
  padding-right: 0.4rem;
}

.pr-5 {
  padding-right: 0.5rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.1rem;
}

.pb-2 {
  padding-bottom: 0.2rem;
}

.pb-3 {
  padding-bottom: 0.3rem;
}

.pb-4 {
  padding-bottom: 0.4rem;
}

.pb-5 {
  padding-bottom: 0.5rem;
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: 0.1rem;
}

.pl-2 {
  padding-left: 0.2rem;
}

.pl-3 {
  padding-left: 0.3rem;
}

.pl-4 {
  padding-left: 0.4rem;
}

.pl-5 {
  padding-left: 0.5rem;
}

/* 5. 文本对齐 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* 6. 文本大小 */
.text-xs {
  font-size: 0.2rem;
}

.text-sm {
  font-size: 0.24rem;
}

.text-base {
  font-size: 0.28rem;
}

.text-lg {
  font-size: 0.32rem;
}

.text-xl {
  font-size: 0.36rem;
}

.text-2xl {
  font-size: 0.4rem;
}

.text-3xl {
  font-size: 0.44rem;
}

.text-4xl {
  font-size: 0.48rem;
}

/* 7. 文本粗细 */
.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* 8. 文本颜色 */
.text-transparent {
  color: transparent;
}

.text-current {
  color: currentColor;
}

.text-black {
  color: #000;
}

.text-white {
  color: #fff;
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-success {
  color: var(--success-color);
}

.text-danger {
  color: var(--danger-color);
}

.text-warning {
  color: var(--warning-color);
}

.text-info {
  color: var(--info-color);
}

.text-light {
  color: var(--light-color);
}

.text-dark {
  color: var(--dark-color);
}

.text-gray-100 {
  color: #f7fafc;
}

.text-gray-200 {
  color: #edf2f7;
}

.text-gray-300 {
  color: #e2e8f0;
}

.text-gray-400 {
  color: #cbd5e0;
}

.text-gray-500 {
  color: #a0aec0;
}

.text-gray-600 {
  color: #718096;
}

.text-gray-700 {
  color: #4a5568;
}

.text-gray-800 {
  color: #2d3748;
}

.text-gray-900 {
  color: #1a202c;
}

/* 9. 背景颜色 */
.bg-transparent {
  background-color: transparent;
}

.bg-current {
  background-color: currentColor;
}

.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-success {
  background-color: var(--success-color);
}

.bg-danger {
  background-color: var(--danger-color);
}

.bg-warning {
  background-color: var(--warning-color);
}

.bg-info {
  background-color: var(--info-color);
}

.bg-light {
  background-color: var(--light-color);
}

.bg-dark {
  background-color: var(--dark-color);
}

.bg-gray-100 {
  background-color: #f7fafc;
}

.bg-gray-200 {
  background-color: #edf2f7;
}

.bg-gray-300 {
  background-color: #e2e8f0;
}

.bg-gray-400 {
  background-color: #cbd5e0;
}

.bg-gray-500 {
  background-color: #a0aec0;
}

.bg-gray-600 {
  background-color: #718096;
}

.bg-gray-700 {
  background-color: #4a5568;
}

.bg-gray-800 {
  background-color: #2d3748;
}

.bg-gray-900 {
  background-color: #1a202c;
}

/* 10. Flexbox */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-no-wrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

/* 11. 宽度和高度 */
.w-0 {
  width: 0;
}

.w-1 {
  width: 0.1rem;
}

.w-2 {
  width: 0.2rem;
}

.w-3 {
  width: 0.3rem;
}

.w-4 {
  width: 0.4rem;
}

.w-5 {
  width: 0.5rem;
}

.w-6 {
  width: 0.6rem;
}

.w-8 {
  width: 0.8rem;
}

.w-10 {
  width: 1rem;
}

.w-12 {
  width: 1.2rem;
}

.w-16 {
  width: 1.6rem;
}

.w-20 {
  width: 2rem;
}

.w-24 {
  width: 2.4rem;
}

.w-32 {
  width: 3.2rem;
}

.w-40 {
  width: 4rem;
}

.w-48 {
  width: 4.8rem;
}

.w-56 {
  width: 5.6rem;
}

.w-64 {
  width: 6.4rem;
}

.w-auto {
  width: auto;
}

.w-px {
  width: 1px;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-1\/4 {
  width: 25%;
}

.w-2\/4 {
  width: 50%;
}

.w-3\/4 {
  width: 75%;
}

.w-1\/5 {
  width: 20%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-3\/6 {
  width: 50%;
}

.w-4\/6 {
  width: 66.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-1\/12 {
  width: 8.333333%;
}

.w-2\/12 {
  width: 16.666667%;
}

.w-3\/12 {
  width: 25%;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-6\/12 {
  width: 50%;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-9\/12 {
  width: 75%;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.h-0 {
  height: 0;
}

.h-1 {
  height: 0.1rem;
}

.h-2 {
  height: 0.2rem;
}

.h-3 {
  height: 0.3rem;
}

.h-4 {
  height: 0.4rem;
}

.h-5 {
  height: 0.5rem;
}

.h-6 {
  height: 0.6rem;
}

.h-8 {
  height: 0.8rem;
}

.h-10 {
  height: 1rem;
}

.h-12 {
  height: 1.2rem;
}

.h-16 {
  height: 1.6rem;
}

.h-20 {
  height: 2rem;
}

.h-24 {
  height: 2.4rem;
}

.h-32 {
  height: 3.2rem;
}

.h-40 {
  height: 4rem;
}

.h-48 {
  height: 4.8rem;
}

.h-56 {
  height: 5.6rem;
}

.h-64 {
  height: 6.4rem;
}

.h-auto {
  height: auto;
}

.h-px {
  height: 1px;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

/* 12. Position */
.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-auto {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.inset-x-0 {
  right: 0;
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.top-auto {
  top: auto;
}

.right-auto {
  right: auto;
}

.bottom-auto {
  bottom: auto;
}

.left-auto {
  left: auto;
}

/* 13. Overflow */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

.scrolling-auto {
  -webkit-overflow-scrolling: auto;
}

/* 14. Visibility */
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* 15. Z-index */
.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

/* 16. 背景纹理和渐变效果 */
.bg-textured {
  background: var(--card-textured-background);
}

.bg-gradient {
  background: var(--gradient-background);
}

.bg-pattern-dots {
  background: var(--card-background);
  background-image: radial-gradient(var(--background-pattern-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-grid {
  background: var(--card-background);
  background-image: linear-gradient(var(--background-pattern-color) 1px, transparent 1px),
                   linear-gradient(90deg, var(--background-pattern-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-diagonal {
  background: var(--card-background);
  background-image: linear-gradient(45deg, var(--background-pattern-color) 25%, transparent 25%),
                   linear-gradient(-45deg, var(--background-pattern-color) 25%, transparent 25%),
                   linear-gradient(45deg, transparent 75%, var(--background-pattern-color) 75%),
                   linear-gradient(-45deg, transparent 75%, var(--background-pattern-color) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.bg-section {
  background: var(--background-alt-color);
  border-radius: 0.2rem;
  padding: 0.3rem;
  margin-bottom: 0.3rem;
}

.bg-card-enhanced {
  background: var(--card-textured-background);
  border-radius: 0.2rem;
  box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.05);
  padding: 0.3rem;
  margin-bottom: 0.3rem;
}

/* 新增背景样式 */
.bg-primary-light {
  background-color: var(--primary-light);
}

.bg-accent {
  background-color: var(--accent-color);
}

.bg-vibrant {
  background-color: var(--vibrant-color);
}

.bg-cool {
  background-color: var(--cool-color);
}

.bg-purple {
  background-color: var(--purple-color);
}

.bg-pink {
  background-color: var(--pink-color);
}

.bg-orange {
  background-color: var(--orange-color);
}

.bg-teal {
  background-color: var(--teal-color);
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-alt {
  background: var(--gradient-alt);
}

.bg-gradient-combo-1 {
  background: var(--gradient-combo-1);
}

.bg-gradient-combo-2 {
  background: var(--gradient-combo-2);
}

.bg-gradient-combo-3 {
  background: var(--gradient-combo-3);
}

.bg-gradient-combo-4 {
  background: var(--gradient-combo-4);
}

.bg-gradient-combo-5 {
  background: var(--gradient-combo-5);
}

.bg-gradient-combo-6 {
  background: var(--gradient-combo-6);
}

/* 17. 图标和装饰元素 */
.icon-small {
  width: 0.24rem;
  height: 0.24rem;
}

.icon-medium {
  width: 0.32rem;
  height: 0.32rem;
}

.icon-large {
  width: 0.48rem;
  height: 0.48rem;
}

.icon-primary {
  color: var(--primary-color);
}

.icon-accent {
  color: var(--accent-color);
}

.icon-warning {
  color: var(--warning-color);
}

.icon-danger {
  color: var(--danger-color);
}

.icon-success {
  color: var(--success-color);
}

.icon-purple {
  color: var(--purple-color);
}

.icon-pink {
  color: var(--pink-color);
}

.icon-orange {
  color: var(--orange-color);
}

.icon-teal {
  color: var(--teal-color);
}

.decoration-dot {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  background: var(--primary-color);
}

.decoration-circle {
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  border: 0.02rem solid var(--primary-color);
}

.decoration-line {
  position: absolute;
  width: 0.5rem;
  height: 0.02rem;
  background: var(--primary-color);
}

.decoration-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.1rem solid transparent;
  border-right: 0.1rem solid transparent;
  border-bottom: 0.2rem solid var(--primary-color);
}

.decoration-star::before {
  content: '★';
  color: var(--warning-color);
  font-size: 0.24rem;
}

.decoration-heart::before {
  content: '♥';
  color: var(--danger-color);
  font-size: 0.24rem;
}

.decoration-diamond::before {
  content: '◆';
  color: var(--purple-color);
  font-size: 0.24rem;
}

.decoration-plus::before {
  content: '+';
  color: var(--primary-color);
  font-size: 0.24rem;
  font-weight: bold;
}

/* 装饰性分隔线 */
.divider-vertical {
  width: 0.02rem;
  height: 0.4rem;
  background: var(--divider-color);
  margin: 0 0.2rem;
}

.divider-horizontal {
  width: 100%;
  height: 0.02rem;
  background: var(--divider-color);
  margin: 0.2rem 0;
}

.divider-gradient {
  width: 100%;
  height: 0.04rem;
  background: var(--gradient-primary);
  margin: 0.2rem 0;
  border-radius: 0.02rem;
}