:root {
   /* 颜色 */
   --color-primary: #4361ee;
   --color-secondary: #3f37c9;
   --color-success: #28a745;
   --color-danger: #dc3545;
   --color-warning: #ffc107;
   --color-info: #17a2b8;

   --color-text: #333;
   --color-text-light: #555;
   --color-background: #f1f8ff;
   --color-border: #dee2e6;
   --color-link: var(--color-primary);
   --color-link-hover: #0056b3;

   --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-family-serif: "Georgia", serif;
   --font-family-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-size-base: 1rem;
   --font-weight-normal: 400;
   --font-weight-bold: 700;

   /* 间距 */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;

   --border-radius: 0.25rem;
   --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   --transition: all 0.3s ease-in-out;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 html,
 body,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 figure,
 blockquote,
 dl,
 dd {
   margin: 0;
   padding: 0;
 }

 html,
 body {
   width: 100vw;
   height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;

   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);
   line-height: 1.5;
   color: var(--color-text);
   background-color: var(--color-background);
 }

 html {
   overflow: hidden;
 }

 body {
   overflow: auto;
 }

 ul,
 ol {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 img,
 picture,
 video,
 canvas,
 svg {
   display: block;
   max-width: 100%;
 }

 input,
 button,
 textarea,
 select {
   font: inherit;
   margin: 0;
 }

 p,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   overflow-wrap: break-word;
 }


 h1,
 .h1 {
   font-size: 2.5rem;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   margin-bottom: var(--spacing-md);
 }

 h2,
 .h2 {
   font-size: 2rem;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   margin-bottom: var(--spacing-md);
 }

 h3,
 .h3 {
   font-size: 1.75rem;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   margin-bottom: var(--spacing-md);
 }

 h4,
 .h4 {
   font-size: 1.5rem;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   margin-bottom: var(--spacing-sm);
 }

 h5,
 .h5 {
   font-size: 1.25rem;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   margin-bottom: var(--spacing-sm);
 }

 h6,
 .h6 {
   font-size: 1rem;
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   margin-bottom: var(--spacing-sm);
 }

 p {
   margin-bottom: var(--spacing-md);
   line-height: 1.6;
 }


 hr {
   border: 0;
   border-top: 1px solid var(--color-border);
   margin: var(--spacing-lg) 0;
 }


 .container {
   width: 100%;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--spacing-md);
   padding-right: var(--spacing-md);
 }

 @media (max-width: 768px) {
   .container {
     padding-left: var(--spacing-sm);
     padding-right: var(--spacing-sm);
   }
 }

 .break-word {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }

 .clearfix::after {
   content: "";
   display: table;
   clear: both;
 }

 .visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
 }

 i.fa-solid {
   cursor: pointer;
 }

 i.fa-solid:hover {
   opacity: 0.7;
 }

 ::-webkit-scrollbar {
   background-color: none;
   width: 5px;
   height: 5px;
 }

 ::-webkit-scrollbar-thumb {
   background: #aaa;
 }

 /* 新增扁平化和对比度样式 */

 /* 按钮基础样式 */
 button {
   background-color: var(--color-primary);
   color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }

 button:hover {
   background-color: #2563eb;
   /* A slightly darker primary color */
   box-shadow: 0 2px 4px var(--shadow-color);
 }

 button:active {
   background-color: #1e40af;
   /* Even darker */
 }

 button:disabled {
   background-color: var(--color-secondary);
   cursor: not-allowed;
 }

 /* 表单元素基础样式 */
 input[type="text"],
 input[type="password"],
 input[type="email"],
 input[type="number"],
 textarea {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   color: var(--text-color);
   transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }

 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
 input[type="number"]:focus,
 textarea:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   /* primary-color with transparency */
 }

 /* 通用容器和阴影 */
 .card {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color);
   padding: 20px;
   margin-bottom: 20px;
 }

 /* 辅助类 */
 .text-primary {
   color: var(--color-primary);
 }

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

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

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

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

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

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

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

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

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

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

 .hover-underline:hover {
   text-decoration: underline;
 }