/*
 * 金股讯 Web 端布局工具类
 * 替代 Tailwind CSS，提供页面布局所需的工具类
 * 新页面开发请优先使用 Layui 组件和栅格系统
 */

/* ========== Minimal Reset (replaces Tailwind preflight) ========== */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

body {
  margin: 0;
  line-height: inherit;
}

/* ========== Display & Position ========== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.hidden { display: none; }
.relative { position: relative; }

/* ========== Width ========== */
.w-full { width: 100%; }
.w-1\/4 { width: 25%; }
.w-1\/5 { width: 20%; }
.w-4\/5 { width: 80%; }
.w-8 { width: 2rem; }
.w-11\/12 { width: 91.666667%; }

/* ========== Height ========== */
.h-full { height: 100%; }
.h-8 { height: 2rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-40 { height: 10rem; }
.h-60 { height: 15rem; }
.h-2\/4 { height: 50%; }

/* ========== Flex Alignment ========== */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* ========== Margin ========== */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-4 { margin-left: 1rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-28 { margin-left: 7rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-6 { margin-right: 1.5rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* ========== Padding ========== */
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

/* ========== Typography ========== */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }

/* ========== Gap ========== */
.gap-1 { gap: 0.25rem; }

/* ========== Container ========== */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }