/*
  Mica-UI v2.0.2
  https://github.com/vdanbo/Mica-UI
*/
:root {
  --mica-black: #000000;
  --mica-white: #ffffff;
  --mica-grey-10: #1a1a1a;
  --mica-grey-20: #2b2b2b;
  --mica-grey-30: #424242;
  --mica-grey-40: #5c5c5c;
  --mica-grey-50: #757575;
  --mica-grey-60: #8e8e8e;
  --mica-grey-70: #a8a8a8;
  --mica-grey-80: #c1c1c1;
  --mica-grey-90: #dadada;
  --mica-grey-100: #f3f3f3;
  --mica-blue: #0078d4;
  --mica-blue-dark: #005a9e;
  --mica-blue-light: #009cff;
  --mica-red: #d43a3a;
  --mica-red-dark: #a02c2c;
  --mica-red-light: #e64545;
  --mica-orange: #d46c00;
  --mica-orange-dark: #a45400;
  --mica-orange-light: #ff8000;
  --mica-green: #3ad43a;
  --mica-green-dark: #2ca02c;
  --mica-green-light: #45e645;
  --mica-background-light: rgba(243, 243, 243, 0.8);
  --mica-background-dark: rgba(26, 26, 26, 0.8);
  --mica-border-light: rgba(0, 0, 0, 0.1);
  --mica-border-dark: rgba(255, 255, 255, 0.1);
  --mica-text-light: #000000;
  --mica-text-dark: #ffffff;
  --mica-text-light-disabled: #8e8e8e;
  --mica-text-dark-disabled: #757575;
  --mica-text-light-placeholder: #5c5c5c;
  --mica-text-dark-placeholder: #a8a8a8;
  --mica-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.dark-theme {
  --mica-background-light: var(--mica-background-dark);
  --mica-border-light: var(--mica-border-dark);
  --mica-text-light: var(--mica-text-dark);
  --mica-text-light-disabled: var(--mica-text-dark-disabled);
  --mica-text-light-placeholder: var(--mica-text-dark-placeholder);
}
*,
*::before,
*::after {
  box-sizing: initial;
}
.mica-container {
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
}
.mica-card {
  border-radius: 8px;
  background-color: var(--mica-background-light);
  border: 1px solid var(--mica-border-light);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: all 0.2s ease-in-out;
}
.mica-card:hover {
  box-shadow: var(--mica-shadow);
}
.mica-card-content {
  padding: 16px;
}
.mica-card-header {
  padding: 16px;
  border-bottom: 1px solid var(--mica-border-light);
}
.mica-card-footer {
  padding: 16px;
  border-top: 1px solid var(--mica-border-light);
}
.mica-btn {
  border-radius: 4px;
  padding: 8px 16px;
  border: 1px solid var(--mica-border-light);
  background-color: var(--mica-background-light);
  color: var(--mica-text-light);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.mica-btn:hover {
  border-color: var(--mica-blue);
  color: var(--mica-blue);
}
.mica-btn:disabled {
  color: var(--mica-text-light-disabled);
  cursor: not-allowed;
}
.mica-btn-primary {
  background-color: var(--mica-blue);
  color: var(--mica-white);
  border-color: var(--mica-blue);
}
.mica-btn-primary:hover {
  background-color: var(--mica-blue-dark);
  border-color: var(--mica-blue-dark);
  color: var(--mica-white);
}
.mica-btn-primary:disabled {
  background-color: var(--mica-grey-80);
  border-color: var(--mica-grey-80);
  color: var(--mica-text-light-disabled);
}
.mica-input {
  border-radius: 4px;
  padding: 8px 12px;
  border: 1px solid var(--mica-border-light);
  background-color: transparent;
  color: var(--mica-text-light);
  transition: all 0.2s ease-in-out;
  width: 100%;
}
.mica-input:hover {
  border-color: var(--mica-grey-60);
}
.mica-input:focus {
  outline: none;
  border-color: var(--mica-blue);
}
.mica-input:disabled {
  background-color: var(--mica-grey-100);
  color: var(--mica-text-light-disabled);
  cursor: not-allowed;
}
.mica-input::placeholder {
  color: var(--mica-text-light-placeholder);
}
.dark-theme .mica-input:disabled {
  background-color: var(--mica-grey-20);
}
.mica-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.mica-toggle-switch {
  width: 40px;
  height: 20px;
  background-color: var(--mica-grey-80);
  border-radius: 10px;
  position: relative;
  transition: all 0.2s ease-in-out;
}
.mica-toggle-switch::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--mica-white);
  top: 2px;
  left: 2px;
  transition: all 0.2s ease-in-out;
}
.mica-toggle input:checked + .mica-toggle-switch {
  background-color: var(--mica-blue);
}
.mica-toggle input:checked + .mica-toggle-switch::before {
  transform: translateX(20px);
}
.mica-toggle-label {
  margin-left: 8px;
  color: var(--mica-text-light);
}
.mica-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background-color: var(--mica-grey-80);
  border-radius: 2px;
  outline: none;
}
.mica-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--mica-blue);
  cursor: pointer;
}
.mica-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--mica-blue);
  cursor: pointer;
}
.mica-progress {
  width: 100%;
  height: 4px;
  background-color: var(--mica-grey-80);
  border-radius: 2px;
  overflow: hidden;
}
.mica-progress-bar {
  height: 100%;
  background-color: var(--mica-blue);
  border-radius: 2px;
  transition: width 0.2s ease-in-out;
}
.mica-tooltip {
  position: relative;
  display: inline-block;
}
.mica-tooltip .mica-tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: var(--mica-grey-20);
  color: var(--mica-white);
  text-align: center;
  border-radius: 4px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.2s;
}
.mica-tooltip:hover .mica-tooltip-text {
  visibility: visible;
  opacity: 1;
}
.mica-alert {
  padding: 16px;
  border-radius: 4px;
  border: 1px solid;
}
.mica-alert-info {
  background-color: rgba(0, 120, 212, 0.1);
  border-color: var(--mica-blue);
  color: var(--mica-blue);
}
.mica-alert-success {
  background-color: rgba(58, 212, 58, 0.1);
  border-color: var(--mica-green);
  color: var(--mica-green-dark);
}
.mica-alert-warning {
  background-color: rgba(212, 108, 0, 0.1);
  border-color: var(--mica-orange);
  color: var(--mica-orange-dark);
}
.mica-alert-danger {
  background-color: rgba(212, 58, 58, 0.1);
  border-color: var(--mica-red);
  color: var(--mica-red-dark);
}
.dark-theme .mica-alert-success {
  color: var(--mica-green);
}
.dark-theme .mica-alert-warning {
  color: var(--mica-orange);
}
.dark-theme .mica-alert-danger {
  color: var(--mica-red);
}
.mica-nav {
  display: flex;
  flex-direction: column;
}
.mica-nav-item {
  padding: 12px 16px;
  color: var(--mica-text-light);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}
.mica-nav-item:hover {
  background-color: var(--mica-border-light);
}
.mica-nav-item.active {
  border-left-color: var(--mica-blue);
  color: var(--mica-blue);
  background-color: var(--mica-border-light);
}
.mica-table {
  width: 100%;
  border-collapse: collapse;
}
.mica-table th,
.mica-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mica-border-light);
}
.mica-table th {
  font-weight: 600;
}
.mica-table tbody tr:hover {
  background-color: var(--mica-border-light);
}
.hidden {
  display: none;
}
[hidden] {
  display: none !important;
}
/* Fluent emoji */
@font-face {
  font-family: "Fluent Emoji";
  src: url("https://cdn.jsdelivr.net/gh/vdanbo/Mica-UI@2.0.2/dist/fonts/FluentEmoji.woff2")
    format("woff2");
}
/* Segoe Fluent Icons */
@font-face {
  font-family: "Segoe Fluent Icons";
  src: url("https://cdn.jsdelivr.net/gh/vdanbo/Mica-UI@2.0.2/dist/fonts/Segoe-Fluent-Icons.woff2")
    format("woff2");
}
.fluent-icons {
  font-family: "Segoe Fluent Icons";
}
/* Other */
::selection {
  background-color: var(--mica-blue);
  color: var(--mica-white);
}
/* Scrollbar */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ma-accent, var(--mica-grey-80)) 40%, transparent) !important;
  border-radius: 3px !important;
  transition: background 0.2s ease !important;
}
.dark-theme ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ma-accent, var(--mica-grey-40)) 50%, transparent) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ma-accent, var(--mica-grey-60)) 60%, transparent) !important;
}
.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ma-accent, var(--mica-grey-50)) 70%, transparent) !important;
}
body {
  font-family: "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
    "Helvetica Neue", Arial, sans-serif;
}
/* More Info */
.mica-more-info {
  position: relative;
  display: inline-block;
}
.mica-more-info-content {
  display: none;
  position: absolute;
  background-color: var(--mica-background-light);
  border: 1px solid var(--mica-border-light);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--mica-shadow);
  border-radius: 8px;
  padding: 8px;
  width: 200px;
  z-index: 1;
}
.mica-more-info:hover .mica-more-info-content {
  display: block;
}
.mica-blockquote {
  margin: 16px 0;
  padding: 16px;
  border-left: 4px solid var(--mica-grey-80);
  background-color: var(--mica-border-light);
  color: var(--mica-text-light);
  border-radius: 4px;
}
.dark-theme .mica-blockquote {
  border-left-color: var(--mica-grey-40);
}
/* Media */
@media screen and (max-width: 768px) {
  .mica-nav {
    flex-direction: row;
    overflow-x: auto;
  }
  .mica-nav-item {
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .mica-nav-item.active {
    border-bottom-color: var(--mica-blue);
  }
}