/* Global Layui-based visual standardization */
:root {
  --std-primary: #16baaa;
  --std-primary-hover: #13a194;
  --std-primary-soft: #e8fbf8;
  --std-secondary: #1e9fff;
  --std-success: #16b777;
  --std-warning: #ffb800;
  --std-danger: #ff5722;
  --std-text-main: #1f2937;
  --std-text-sub: #64748b;
  --std-border: #e5eaf0;
  --std-bg-page: #f5f8fa;
  --std-bg-card: #ffffff;
  --std-radius-sm: 8px;
  --std-radius-md: 10px;
  --std-radius-lg: 14px;
}

html,
body {
  background: var(--std-bg-page) !important;
  color: var(--std-text-main);
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

body.layui-standardized {
  min-height: 100vh;
}

.layui-standard-main {
  background: radial-gradient(circle at top right, rgba(22, 186, 170, 0.08), transparent 36%), var(--std-bg-page);
}

.layui-standard-section {
  position: relative;
}

/* Sidebar */
aside {
  background: #0f172a !important;
}

aside .bg-slate-800 {
  background: #111f38 !important;
}

aside .bg-orange-500,
aside .text-orange-500,
aside .group-hover\:text-orange-500,
aside .hover\:text-orange-500:hover {
  background-color: var(--std-primary) !important;
  color: #fff !important;
}

/* Top header */
main > header.bg-white {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--std-border) !important;
}

/* Card and panel surfaces */
.layui-standard-card,
.rounded-2xl.border,
.rounded-xl.border,
.rounded-lg.border {
  background: var(--std-bg-card);
  border-color: var(--std-border) !important;
  border-radius: var(--std-radius-lg) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.rounded-xl {
  border-radius: 12px !important;
}

.rounded-lg {
  border-radius: 10px !important;
}

.border,
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--std-border) !important;
}

/* Forms */
form.layui-form .layui-form-label {
  color: var(--std-text-sub);
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
select,
textarea {
  border-radius: var(--std-radius-md) !important;
  border-color: var(--std-border) !important;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus,
.layui-input:focus,
.layui-textarea:focus {
  border-color: var(--std-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 186, 170, 0.16);
  outline: none;
}

/* Button system (compatible with existing utility classes) */
button,
.layui-btn,
a.layui-btn {
  border-radius: var(--std-radius-md) !important;
  font-weight: 600;
  transition: transform .14s ease, box-shadow .2s ease;
}

.layui-btn,
.layui-btn-normal {
  background-color: var(--std-primary) !important;
  border-color: var(--std-primary) !important;
  color: #fff !important;
}

.layui-btn:hover,
.layui-btn-normal:hover {
  background-color: var(--std-primary-hover) !important;
  border-color: var(--std-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.layui-btn-primary {
  background: #fff !important;
  color: #334155 !important;
  border-color: #d5dee8 !important;
}

.layui-btn-warm {
  background: var(--std-warning) !important;
  border-color: var(--std-warning) !important;
}

.layui-btn-danger {
  background: var(--std-danger) !important;
  border-color: var(--std-danger) !important;
  color: #fff !important;
}

.layui-btn-disabled,
button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

/* Badge and status colors */
.layui-badge {
  border-radius: 999px;
  font-weight: 600;
  padding: 0 10px;
}

.layui-bg-blue {
  background-color: var(--std-secondary) !important;
}

.layui-bg-green {
  background-color: var(--std-success) !important;
}

.layui-bg-orange {
  background-color: var(--std-warning) !important;
}

.layui-bg-red {
  background-color: var(--std-danger) !important;
}

.layui-bg-gray {
  background-color: #8799ad !important;
}

.bg-orange-50 {
  background-color: #fff7e8 !important;
}

.text-orange-500,
.text-orange-600,
.text-orange-700 {
  color: var(--std-primary) !important;
}

.border-orange-100,
.border-orange-200 {
  border-color: rgba(22, 186, 170, 0.25) !important;
}

.bg-emerald-50 {
  background-color: #e9fbf4 !important;
}

.text-emerald-500,
.text-emerald-600,
.text-emerald-700 {
  color: var(--std-success) !important;
}

.bg-blue-50 {
  background-color: #edf7ff !important;
}

.text-blue-600,
.text-blue-700 {
  color: var(--std-secondary) !important;
}

.bg-red-50,
.bg-rose-50 {
  background-color: #fff2ef !important;
}

.text-red-500,
.text-red-600,
.text-rose-600 {
  color: var(--std-danger) !important;
}

/* Tables */
table {
  border-collapse: collapse;
}

thead,
thead tr,
.bg-gray-50,
.bg-slate-50 {
  background: #f8fafc !important;
}

th,
td {
  border-color: var(--std-border) !important;
}

.layui-table th {
  font-weight: 700;
  color: #64748b;
}

.layui-table tr:hover {
  background: #f8fcfb;
}

/* Overlay/modal */
.share-modal-mask,
.poster-modal-mask,
.fixed.inset-0.bg-black\/40,
.fixed.inset-0.bg-black\/50,
.fixed.inset-0.bg-black\/35 {
  backdrop-filter: blur(2px);
}

.layui-layer {
  border-radius: 12px !important;
}

.layui-layer-title {
  font-weight: 700 !important;
}

.layui-layer-btn .layui-layer-btn0 {
  background: var(--std-primary) !important;
  border-color: var(--std-primary) !important;
}

/* Product image consistency (square + full image) */
img.aspect-square,
img[class*="w-12"][class*="h-12"],
img[class*="w-14"][class*="h-14"],
img[class*="w-16"][class*="h-16"],
img[class*="w-20"][class*="h-20"],
img[class*="w-24"][class*="h-24"],
img[class*="w-28"][class*="h-28"],
img[class*="w-32"][class*="h-32"] {
  object-fit: contain !important;
  background: #fff;
}

/* Scrollbar */
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.65);
}

@media (max-width: 1024px) {
  main.ml-64,
  main.ml-20 {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .layui-layer {
    border-radius: 10px !important;
  }
  .layui-standard-section {
    padding-left: 12px;
    padding-right: 12px;
  }
}