/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com */
*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}


/* Custom Tailwind CSS with primary and secondary colors */
:root {
  --color-primary: #3176FF;
  --color-primary-dark: #2563EB;
  --color-primary-light: #60A5FA;
  --color-primary-lighter: #DBEAFE;
  --color-secondary: #6B7280;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  
  /* 添加科幻风格所需的颜色变量 */
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}
    
/* Utility classes */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-lighter { background-color: var(--color-primary-lighter); }
.bg-primary\/5 { background-color: rgba(49, 118, 255, 0.05); }
.bg-primary\/90 { background-color: rgba(49, 118, 255, 0.9); }
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: #111827; }
.bg-red-500 { background-color: #ef4444; }
.bg-green-50 { background-color:rgba(16, 185, 129, 0.15) }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-yellow-100 { background-color: #fef9c3; }
.bg-yellow-200 { background-color: #fef08a; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-200 { background-color: #c7d2fe; }
.bg-indigo-500 { background-color: var(--color-indigo-500); }
.bg-indigo-600 { background-color: var(--color-indigo-600); }
.bg-indigo-700 { background-color: var(--color-indigo-700); }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-200 { background-color: #e9d5ff; }
.bg-purple-300 { background-color: var(--color-purple-300); }
.bg-purple-400 { background-color: var(--color-purple-400); }
.bg-purple-600 { background-color: var(--color-purple-600); }
.bg-purple-700 { background-color: var(--color-purple-700); }
.bg-purple-900 { background-color: #581c87; }
.bg-slate-800 { background-color: var(--color-slate-800); }
.bg-slate-900 { background-color: var(--color-slate-900); }
.bg-teal-600 { background-color: var(--color-teal-600); }
.bg-teal-700 { background-color: var(--color-teal-700); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, #eff6ff, #ffffff); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }

/* 渐变背景色类 */
.from-indigo-600 { --tw-gradient-from: var(--color-indigo-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79, 70, 229, 0)); }
.via-purple-600 { --tw-gradient-stops: var(--tw-gradient-from), var(--color-purple-600), var(--tw-gradient-to, rgba(147, 51, 234, 0)); }
.to-indigo-700 { --tw-gradient-to: var(--color-indigo-700); }
.from-purple-600 { --tw-gradient-from: var(--color-purple-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0)); }
.to-indigo-600 { --tw-gradient-to: var(--color-indigo-600); }
.hover\:from-purple-700:hover { --tw-gradient-from: var(--color-purple-700); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(126, 34, 206, 0)); }
.hover\:to-indigo-700:hover { --tw-gradient-to: var(--color-indigo-700); }
.from-green-600 { --tw-gradient-from: #16a34a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22, 163, 74, 0)); }
.to-teal-600 { --tw-gradient-to: var(--color-teal-600); }
.hover\:from-green-700:hover { --tw-gradient-from: #15803d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(21, 128, 61, 0)); }
.hover\:to-teal-700:hover { --tw-gradient-to: var(--color-teal-700); }


.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-primary-light { color: var(--color-primary-light); }
.text-white { color: #ffffff; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-800 { color: #991b1b; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #059669; }
.text-green-800 { color: #166534; }
.text-blue-600 { color: #2563eb; }
.text-blue-800 { color: #1e40af; }
.text-yellow-600 { color: #ca8a04; }
.text-yellow-800 { color: #854d0e; }
.text-indigo-800 { color: #3730a3; }
.text-purple-100 { color: #f3e8ff; }
.text-purple-300 { color: var(--color-purple-300); }
.text-purple-400 { color: var(--color-purple-400); }
.text-purple-600 { color: var(--color-purple-600); }
.text-purple-800 { color: #7e22ce; }

.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-600 { border-color: #4b5563; }
.border-purple-500 { border-color: #a855f7; }
.border-transparent { border-color: transparent; }
.border-primary { border-color: var(--color-primary); }
.border-primary-dark { border-color: var(--color-primary-dark); }
.border-primary-light { border-color: var(--color-primary-light); }

/* 阴影特效 */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.hover\:shadow-\[0_0_15px_rgba\(139\,92\,246\,0\.5\)\]:hover { box-shadow: 0 0 15px rgba(139,92,246,0.5); }

.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-button { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-10 { padding-right: 2.5rem; }

.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem;}
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.50rem; }
.ml-3 { margin-left: 0.75rem; }

.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.max-w-md { max-width: 30rem; }
.max-w-7xl { max-width: 90rem; }

.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-8 { height: 2rem; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }

.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 列间距 (column-gap) */
.gap-c-0 { column-gap: 0; }
.gap-c-05 { column-gap: 0.5rem; }
.gap-c-1 { column-gap: 1rem; }
.gap-c-15 { column-gap: 1.5rem; }
.gap-c-2 { column-gap: 2rem; }
.gap-c-25 { column-gap: 2.5rem; }
.gap-c-3 { column-gap: 3rem; }
.gap-c-4 { column-gap: 4rem; }
.gap-c-5 { column-gap: 5rem; }

/* 行间距 (row-gap) - 如需配套使用 */
.gap-r-0 { row-gap: 0; }
.gap-r-05 { row-gap: 0.5rem; }
.gap-r-1 { row-gap: 1rem; }
.gap-r-15 { row-gap: 1.5rem; }
.gap-r-2 { row-gap: 2rem; }
.gap-r-25 { row-gap: 2.5rem; }
.gap-r-3 { row-gap: 3rem; }
.gap-r-4 { row-gap: 4rem; }
.gap-r-5 { row-gap: 5rem; }

/* 双向间距 (gap) */
.gap-0 { gap: 0; }
.gap-05 { gap: 0.5rem; }
.gap-1 { gap: 1rem; }
.gap-15 { gap: 1.5rem; }
.gap-2 { gap: 2rem; }
.gap-25 { gap: 2.5rem; }
.gap-3 { gap: 3rem; }
.gap-4 { gap: 4rem; }
.gap-5 { gap: 5rem; }
.gap-6 { gap: 6rem; }
/* ======================== */
/* 自定义百分比宽度工具类 */
/* ======================== */
.w-10\% { width: 10%; }
.w-15\% { width: 15%; }
.w-20\% { width: 20%; }
.w-25\% { width: 25%; }
.w-30\% { width: 30%; }
.w-33\% { width: 33.333%; }
.w-35\% { width: 35%; }
.w-40\% { width: 40%; }
.w-45\% { width: 45%; }
.w-50\% { width: 50%; }
.w-55\% { width: 55%; }
.w-60\% { width: 60%; }
.w-65\% { width: 65%; }
.w-66\% { width: 66.666%; }
.w-70\% { width: 70%; }
.w-75\% { width: 75%; }
.w-80\% { width: 80%; }
.w-85\% { width: 85%; }
.w-90\% { width: 90%; }
.w-95\% { width: 95%; }
.w-100\% { width: 100%; }

/* ======================== */
/* 响应式变体 (可选) */
/* ======================== */
@media (min-width: 640px) {
  .sm\:w-45\% { width: 45%; }
}
@media (min-width: 768px) {
  .md\:w-45\% { width: 45%; }
}
@media (min-width: 1024px) {
  .lg\:w-45\% { width: 45%; }
}

/* ======================== */
/* 特殊场景 */
/* ======================== */
/* 带 !important 的强制覆盖 */
.w-45\%\! { width: 45% !important; }

/* 最小/最大宽度 */
.min-w-45\% { min-width: 45%; }
.max-w-45\% { max-width: 45%; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }

.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-1:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: none !important; }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: none !important; }
.focus\:ring:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: none !important; }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); box-shadow: none !important; }
.focus\:ring-primary\/50:focus { --tw-ring-color: var(--color-primary); box-shadow: none !important; }
.focus\:ring-opacity-50:focus { --tw-ring-opacity: 1; }
.focus\:border-primary:focus { border-color: var(--color-primary); }
.focus\:border-transparent:focus { border-color: transparent; }

.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark); }
.hover\:bg-primary\/90:hover { background-color: rgba(49, 118, 255, 0.9); }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-red-600:hover { background-color: #dc2626; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.hover\:bg-purple-700:hover { background-color: var(--color-purple-700); }
.hover\:bg-purple-200:hover { background-color: #e9d5ff; }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-primary\/80:hover { color: rgba(49, 118, 255, 0.8); }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:text-red-800:hover { color: #991b1b; }
.hover\:border-primary:hover { border-color: var(--color-primary); }

.sticky { position: sticky; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.top-0 { top: 0; }
.top-4 { top: 1rem; }
.top-24 { top: 6rem; }
.right-0 { right: 0; }
.right-4 { right: 1rem; }
.left-0 { left: 0; }
.left-3 { left: 0.75rem; }
.left-4 { left: 1rem; }
.left-24 { left: 6rem; }

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

.bg-opacity-50 { --tw-bg-opacity: 0.5; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }

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

.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.tracking-wider { letter-spacing: 0.05em; }
.leading-5 { line-height: 1.25rem; }

.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }

.divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(229 231 235 / var(--tw-divide-opacity)); }

/* Media queries */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 768px) {
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Custom styles for the project */
.submenu-item {
  padding-left: 2.5rem;
  background-color: rgba(243, 244, 246, 0.5);
}

.table-container::-webkit-scrollbar {
  height: 8px;
}
.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
.table-row-hover:hover {
  background-color: rgba(49, 118, 255, 0.05);
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* 强化表单元素焦点样式 */
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 按钮样式增强 */
button.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

button.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

button.btn-primary:focus {
  outline: none;
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

/* 表格样式增强 */
table thead th {
  background-color: var(--color-primary);
  color: white;
}

/* 链接样式 */
a.link-primary {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}

a.link-primary:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* 只对特定表格的表头应用左对齐 */
.left-aligned-table th {
    text-align: left !important;
}

/* 评分汇总表格应该居中对齐 */
.score-summary-container th,
.score-summary-container td {
    text-align: center !important;
}

/* 从index.html移动过来的样式 */
[x-cloak] { 
    display: none !important; 
}

/* 侧边栏标题样式 */
.p-6.border-b h1 {
    font-size: 1.65rem;
    font-weight: bold;
    color: #3176FF;
    white-space: nowrap;
}

/* 设置活动子菜单项和菜单项的背景颜色和文字颜色 */
.submenu-item.active, .menu-item.active {
    background-color: #3176FF; /* 活动项的背景颜色 */
    color: #f8f8f8; /* 活动项的文字颜色 */
}

/* 导航栏hover效果 */
.menu-item:hover, .submenu-item:hover {
    background-color: #3176ff79;
    cursor: pointer; /* 添加鼠标手形图标 */
    color: #fdfdfd;
}   

/* 导航栏图标样式 */
.menu-item i, .submenu-item i {
    color: #6B7280;
}

/* 设置活动菜单项和子菜单项的图标颜色*/
.menu-item.active i, .submenu-item.active i {
    color: #fafafa;
}

/* 下拉箭头样式 */
.ri-arrow-down-s-line {
    transition: transform 0.3s ease;
}

/* 表格列宽调整 */
.w-10 {
    width: 10%;
}

/* 确保表头文字左对齐 */
th {
    text-align: left !important;
} 

/* 表格行悬停效果 */
.table-row-hover:hover {
    background-color: rgba(215, 224, 241, 0.39);
}

/* 菜单显示/隐藏状态 */
.menu-content {
    display: none;
}

.menu-content.expanded {
    display: block;
}

/* 达标和未达标文字颜色和背景 */
.text-green-600 {
    color: #059669;
    font-weight: bold;
}

.text-red-600 {
    color: #dc2626;
    font-weight: bold;
}

/* 达标和未达标背景颜色 */
.bg-green-50 {
    background-color: rgba(5, 150, 105, 0.1);
}
.bg-blue-50 {
    background-color: rgba(5, 85, 150, 0.1);
}
.bg-yellow-50 {
    background-color: rgba(140, 150, 5, 0.1);
}
.bg-red-50 {
    background-color: rgba(220, 38, 38, 0.1);
}

/* 针对Chrome和Safari的样式 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select option:hover,
    select option:focus {
        background-color: var(--select-option-hover-bg) !important;
        color: #374151 !important;
        box-shadow: 0 0 0 1000px var(--select-option-hover-bg) inset !important;
        -webkit-text-fill-color: #374151 !important;
    }
    
    select option:checked {
        background-color: var(--select-option-selected-bg) !important;
        color: #374151 !important;
        box-shadow: 0 0 0 1000px var(--select-option-selected-bg) inset !important;
        -webkit-text-fill-color: #374151 !important;
    }
}

/* 分类标签样式 */
.category-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.category-安全耐久 {
    background-color: rgba(59, 130, 246, 0.15);
    color: #1e40af;
    border-left: 3px solid #1e40af;
}

.category-健康舒适 {
    background-color: rgba(16, 185, 129, 0.15);
    color: #065f46;
    border-left: 3px solid #065f46;
}

.category-生活便利 {
    background-color: rgba(245, 158, 11, 0.15);
    color: #92400e;
    border-left: 3px solid #92400e;
}

.category-资源节约 {
    background-color: rgba(5, 150, 105, 0.15);
    color: #064e3b;
    border-left: 3px solid #064e3b;
}

.category-环境宜居 {
    background-color: rgba(124, 58, 237, 0.15);
    color: #5b21b6;
    border-left: 3px solid #5b21b6;
}

.category-提高与创新 {
    background-color: rgba(217, 70, 239, 0.15);
    color: #7e22ce;
    border-left: 3px solid #7e22ce;
}

.category-其他 {
    background-color: rgba(156, 163, 175, 0.15);
    color: #4b5563;
    border-left: 3px solid #4b5563;
}

/* 悬浮保存按钮样式 */
.floating-save-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}

.floating-save-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.floating-save-btn i {
    font-size: 24px;
}

/* 悬浮按钮的提示文本 */
.floating-save-btn::after {
    content: "保存评分";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.floating-save-btn:hover::after {
    opacity: 1;
}

/* 添加旋转动画样式 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
} 


    /*
    * Remix Icon v4.5.0 (Simplified)
    */
    [class^="ri-"], [class*=" ri-"] {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      vertical-align: middle;
    }
    
    /* 复选框样式 */
    .checkbox-wrapper input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        cursor: pointer;
    }
    .checkbox-wrapper .custom-checkbox {
        width: 18px;
        height: 18px;
        border: 2px solid #e5e7eb;
        border-radius: 4px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transition: all 0.2s;
        margin-right: 8px;
    }
    .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox {
        background-color: #3176FF;
        border-color: #3176FF;
    }
    .checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .note-italic {
        font-style: italic;
        font-size: 14px;
        color: #6B7280;
    }

    html {
        overflow: visible !important;
    }

    .bg {
        background-color: #3176FF; 
    }
    
    /* 确保iframe内容不会影响外部标题 */
    body {
        margin-top: 0;
        padding-top: 0;
    }
    
    /* 美化二级指标标题和数据行 - 新样式 */
    .sub-items {
        padding: 1rem !important;
    }
    
    .sub-item {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        margin-bottom: 0.25rem;
    }
    
    .sub-item.font-bold {
        background-color: #f3f4f6;
        padding: 0.75rem 0.5rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }
    
    /* 调整列宽和对齐方式 */
    .col-indicator {
        width: 33%;
        text-align: left;
        padding-left: 0.5rem;
    }
    
    .col-requirement {
        width: 33%;
        text-align: center;
    }
    
    .col-actual {
        width: 33%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    /* 美化标题行 */
    .header-row {
        background-color: #f3f4f6;
        color: #374151;
    }
    
    /* 美化复选框容器 */
    .checkbox-container {
        display: flex;
        align-items: center;
        margin-right: 0.5rem;
    }
    
    /* 美化输入框 */
    .input-container {
        display: flex;
        align-items: center;
    }
    
    .input-container input {
        width: 5rem;
        text-align: center;
        margin-right: 0.25rem;
    }
    
    /* 交替行背景色 */
    .sub-item:nth-child(even) {
        background-color: #f9fafb;
    }
    
    /* 分类标题样式 */
    .category h3 {
        background-color: #3176FF;
        color: white;
        padding: 0.75rem 1rem;
        font-weight: 600;
    }

.hover\:text-purple-600:hover{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity));
}

/* 菜单图标固定尺寸和定位样式 - 防止图标区域抖动 */
.submenu-item i, .menu-item i {
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transform: translateZ(0) !important; /* 启用GPU加速 */
    will-change: transform !important;
}

/* 菜单项整体的稳定样式 */
.submenu-item, .menu-item {
    position: relative !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
}

/* 修复子菜单内容区域 */
.menu-content {
    transition: none !important;
    transform: translateZ(0) !important;
}

/* 页面过渡效果 */
.menu-content.expanded {
    display: block !important;
}

/* 手动添加的样式 */
.max-h-24 {
  max-height: 6rem; /* 24 * 0.25rem = 6rem */
}
.max-h-48 {
    max-height: 12rem; /* 48 * 0.25rem = 12rem */
  }
.max-h-96 {
    max-height: 24rem; /* 96 * 0.25rem = 24rem */
  }
.min-h-\[100px\] {
  min-height: 100px;
}