:root {
            --mdui-primary: #2962ff;
            --mdui-surface: #ffffff;
            --mdui-background: #f5f5f5;
            --mdui-text-primary: rgba(0, 0, 0, 0.87);
            --mdui-text-secondary: rgba(0, 0, 0, 0.6);
            --mdui-shape-corner: 20px;
        }
        /* 页面切换时模糊和透明度的效果 */
        .fade-blur-enter-active, .fade-blur-leave-active {
          transition: opacity .5s ease, filter .5s ease, transform .5s ease;
        }

        .fade-blur-enter, .fade-blur-leave-to {
          position: absolute;/* 保持原来的宽度 */
          width: 100%;
          opacity: 0;
          filter: blur(100px);
          transform: translateX(-100%);
        }

        .fade-blur-enter-to, .fade-blur-leave {
          opacity: 1;
          filter: blur(0px);
        }

        









.ldo-enter-active, .ldo-leave-active {
          transition: opacity .5s ease, filter .5s ease, transform .5s ease;
        }

        .ldo-enter, .ldo-leave-to {
          width: 100%;
          opacity: 0;
          filter: blur(100px);
        }

        .ldo-enter-to, .ldo-leave {
          opacity: 1;
          filter: blur(0px);
        }

        





        @keyframes min {
          0% {
          transform: translateX(100%);
          opacity: 0;
          filter: blur(100px); 
          }
          100% {  
          transform: translateX(0%);
          opacity: 1;
          filter: blur(0px);

  
          }
        }
        @keyframes gmin {
          0% {
          transform: translateX(0%);
          opacity: 1;
          filter: blur(0px); 
          }
          100% {  
          transform: translateX(100%);
          opacity: 0;
          filter: blur(100px);

  
          }
        }

        .min {
        animation: min 0.5s ease;
        }


        body {
            margin: 0;
            background: var(--mdui-background);
            font-family: 'Segoe UI', system-ui;
            color: var(--mdui-text-primary);
        }

        .container {
            padding: 16px;
            max-width: 500px;
            margin: 0 auto;
        }

        .status-card {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 24px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .status-card:hover {
            transform: translateY(-2px);
        }

        .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .metric-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--mdui-primary);
        }

        .metric-label {
            color: var(--mdui-text-secondary);
            font-size: 14px;
        }

        .quick-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 24px 0;
        }

        .action-button {
            background: var(--mdui-surface);
            border: none;
            border-radius: 16px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .action-button:hover {
            background: #f0f4ff;
        }

        .action-button svg {
            width: 24px;
            height: 24px;
            fill: var(--mdui-primary);
        }

        .chart-container {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 16px;
            margin: 16px 0;
        }

        .progress-bar {
            height: 8px;
            background: #eeeeee;
            border-radius: 4px;
            overflow: hidden;
            margin: 12px 0;
        }

        .progress-fill {
            width: 65%;
            height: 100%;
            background: var(--mdui-primary);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .nav-bottom {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: var(--mdui-surface);
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--mdui-text-secondary);
            padding: 8px;
            border-radius: 12px;
            transition: all 0.2s;
        }

        .nav-item.active {
            color: var(--mdui-primary);
            background: #e8efff;
        }

        .nav-item svg {
            width: 20px;
            height: 20px;
            margin-bottom: 4px;
        }

        .user-card {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .user-card:hover {
            transform: translateY(-2px);
        }

        .user-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .user-card-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #e8efff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-card-avatar svg {
            width: 24px;
            height: 24px;
            fill: var(--mdui-primary);
        }

        .user-card-info {
            flex: 1;
        }

        .user-card-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .user-card-role {
            font-size: 14px;
            color: var(--mdui-text-secondary);
        }

        .user-card-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .user-card-stat {
            text-align: center;
        }

        .user-card-stat-value {
            font-size: 18px;
            font-weight: 600;
            color: var(--mdui-primary);
        }

        .user-card-stat-label {
            font-size: 12px;
            color: var(--mdui-text-secondary);
        }

        .user-info-card {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }

        .user-info-card:hover {
            transform: translateY(-2px);
        }

        .user-info-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .user-info-card-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #e8efff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-info-card-avatar svg {
            width: 24px;
            height: 24px;
            fill: var(--mdui-primary);
        }

        .user-info-card-info {
            flex: 1;
        }

        .user-info-card-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .user-info-card-role {
            font-size: 14px;
            color: var(--mdui-text-secondary);
        }

        .user-info-card-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .user-info-card-detail {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .user-info-card-detail svg {
            width: 18px;
            height: 18px;
            fill: var(--mdui-primary);
        }

        .user-info-card-detail-label {
            font-size: 14px;
            color: var(--mdui-text-secondary);
        }

        .user-info-card-detail-value {
            font-size: 14px;
            font-weight: 600;
        }

        .table-container {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .table-container table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-container th,
        .table-container td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eeeeee;
        }

        .table-container th {
            font-weight: 600;
            color: var(--mdui-text-primary);
        }

        .table-container td {
            color: var(--mdui-text-secondary);
        }

        .form-container {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .form-container label {
            display: block;
            font-size: 14px;
            color: var(--mdui-text-secondary);
            margin-bottom: 8px;
        }

        .form-container input,
        .form-container select,
        .form-container textarea {
            width: 80%;
            padding: 12px;
            border: 1px solid #eeeeee;
            border-radius: 8px;
            font-size: 14px;
            color: var(--mdui-text-primary);
            margin-bottom: 16px;
            transition: border-color 0.2s;
        }

        .form-container input:focus,
        .form-container select:focus,
        .form-container textarea:focus {
            border-color: var(--mdui-primary);
            outline: none;
        }

        .form-container button {
            background: var(--mdui-primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .form-container button:hover {
            background: #1e4dff;
        }

        .alert {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .alert svg {
            width: 24px;
            height: 24px;
            fill: var(--mdui-primary);
        }

        .alert-success {
            background: #e8f5e9;
        }

        .alert-success svg {
            fill: #4caf50;
        }

        .alert-warning {
            background: #fff3e0;
        }

        .alert-warning svg {
            fill: #ff9800;
        }

        .alert-error {
            background: #ffebee;
        }

        .alert-error svg {
            fill: #f44336;
        }

        .alert-info {
            background: #e3f2fd;
        }

        .alert-info svg {
            fill: #2196f3;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            padding: 24px;
            max-width: 400px;
            width: 100%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
        }

        .modal-close {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
        }

        .modal-close svg {
            width: 24px;
            height: 24px;
            fill: var(--mdui-text-secondary);
        }

        .modal-body {
            margin-bottom: 16px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .modal-footer button {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .modal-footer button.primary {
            background: var(--mdui-primary);
            color: white;
        }

        .modal-footer button.primary:hover {
            background: #1e4dff;
        }

        .modal-footer button.secondary {
            background: #eeeeee;
            color: var(--mdui-text-primary);
        }

        .modal-footer button.secondary:hover {
            background: #dddddd;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin: 16px 0;
        }

        .pagination button {
            background: var(--mdui-surface);
            border: none;
            border-radius: 8px;
            padding: 8px 12px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .pagination button.active {
            background: var(--mdui-primary);
            color: white;
        }

        .pagination button:hover {
            background: #f0f4ff;
        }

        .tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .tabs button {
            background: var(--mdui-surface);
            border: none;
            border-radius: 8px;
            padding: 3px 16px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .tabs button.active {
            background: var(--mdui-primary);
            color: white;
        }

        .tabs button:hover {
            background: #f0f4ff;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-button {
            background: var(--mdui-surface);
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .dropdown-button:hover {
            background: #f0f4ff;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background: var(--mdui-surface);
            border-radius: var(--mdui-shape-corner);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            min-width: 160px;
            z-index: 1;
        }

        .dropdown-content a {
            display: block;
            padding: 8px 16px;
            text-decoration: none;
            color: var(--mdui-text-primary);
            transition: background 0.2s;
        }

        .dropdown-content a:hover {
            background: #f0f4ff;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .timeline {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .timeline-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .timeline-item-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #e8efff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timeline-item-icon svg {
            width: 16px;
            height: 16px;
            fill: var(--mdui-primary);
        }

        .timeline-item-content {
            flex: 1;
        }

        .timeline-item-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .timeline-item-description {
            font-size: 12px;
            color: var(--mdui-text-secondary);
        }

        .timeline-item-time {
            font-size: 12px;
            color: var(--mdui-text-secondary);
        }






.material-icons {
  /* stylelint-disable-next-line */
  font-family: 'Material Icons';
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
}

@font-face {
  font-weight: 400;
  font-family: 'Material Icons';
  font-style: normal;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(./MaterialIcons-Regular.woff2) format('woff2'), url(./MaterialIcons-Regular.woff) format('woff');
}












       
:root {
  --primary: #2962FF;
  --surface: rgba(255,255,255,0.95);
}

.card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(41, 98, 255, 0.1);
  max-width: 360px;
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  border: 1px solid rgba(41, 98, 255, 0.1);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 32px rgba(41, 98, 255, 0.15);
}

.header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  background: rgba(41, 98, 255, 0.1);
  border-radius: 12px;
  display: grid;
  place-items: center;
  transition: transform 0.3s;
}

.icon-wrapper:hover {
  transform: rotate(15deg);
}

.icon {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.title-group {
  flex: 1;
}

.title {
  color: #0A1F44;
  font-size: 1.4rem;
  margin: 0;
  font-weight: 700;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(41, 98, 255, 0.1);
  border-radius: 8px;
  color: var(--primary);
  font-size: 0.9rem;
}

.detail-grid {
  display: grid;
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(41, 98, 255, 0.05);
}

.detail-item:last-child {
  border: none;
}

.label {
  color: #5A6B87;
  font-size: 0.9rem;
}

.value {
  color: #0A1F44;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}




/* From Uiverse.io by xopc333 */ 
.button {
  display: block;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
  overflow: hidden;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: 0;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 7px;
}

.button:before {
  border: 4px solid #2962FF;
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button:after {
  border: 4px solid #5A6B87;
  transform: scale(1.3);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.button:hover:before,
.button:focus:before {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button:hover:after,
.button:focus:after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button-box {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.button-elem {
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px 18px 0 18px;
  transform: rotate(180deg);
  fill: #2962FF;
}

.button:hover .button-box,
.button:focus .button-box {
  transition: 0.4s;
  transform: translateX(-56px);
}
a {
    text-decoration: none; /* 移除下划线 */
    color: inherit;          /* 颜色继承父元素 */
    cursor: pointer;        /* 保留鼠标悬停时的指针样式（可选） */
}

/* 可选：移除其他状态的默认样式 */
a:hover,
a:visited,
a:focus {
    text-decoration: none;
    color: inherit;
}

/* From Uiverse.io by SchawnnahJ */ 
.loader {
 position: relative;
 width: 2.5em;
 height: 2.5em;
 transform: rotate(165deg);
}

.loader:before, .loader:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 0.5em;
 height: 0.5em;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
}

.loader:before {
 animation: before8 2s infinite;
}

.loader:after {
 animation: after6 2s infinite;
}

@keyframes before8 {
 0% {
  width: 0.5em;
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }

 35% {
  width: 2.5em;
  box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
 }

 70% {
  width: 0.5em;
  box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
 }

 100% {
  box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
 }
}

@keyframes after6 {
 0% {
  height: 0.5em;
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }

 35% {
  height: 2.5em;
  box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
 }

 70% {
  height: 0.5em;
  box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
 }

 100% {
  box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
 }
}

.loader {
 position: absolute;
 top: calc(50% - 1.25em);
 left: calc(50% - 1.25em);
}

.md {

 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 100%;
 height: 100vh;
 border-radius: 0.25em;
 transform: translate(-50%, -50%);
 z-index: 99999999;
 background-color: rgba(250,250,255,0.2);
 
        animation: lmin 0.2s ease;
 }
 
 
 
        @keyframes lmin {
          0% {
          opacity: 0;
          filter: blur(100px); 
          }
          100% {  
          opacity: 1;
          filter: blur(0px);

  
          }
        }