:root {
  --size-large: 30px;
  --size-normal: 24px;
  --size-small: 20px;
  --time-slow: 500ms;
  --time-normal: 300ms;
  --time-fast: 120ms;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-width: 1280px;
  min-height: 100vh;
  background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
}

body::-webkit-scrollbar {
  display: none;
}

#alert {
  --back-color: #d1e7dd;
  --color: #0f5132;
  --border: #badbcc;
  width: 100vw;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 10px 30px;
  position: fixed;
  top: -50px;
  left: 0;
  transition: top 200ms;
  background-color: var(--back-color);
  color: var(--color);
  border: 1px solid var(--border);
  z-index: 9000;
}

#alert.show {
  top: 0;
}

#alert.error {
  --back-color: #f8d7da;
  --color: #842029;
  --border: #f5c2c7;
}

.alert-title {
  width: 4em;
  line-height: 30px;
  text-align: center;
  background-color: #cfe2ff;
  color: #084298;
  border: 1px solid #b6d4fe;
}

.alert-msg {
  line-height: 30px;
  margin: 0 auto 0 10px;
}

.alert-close {
  width: 1em;
  height: 1em;
  fill: var(--color);
  cursor: pointer;
}

#confirm {
  position: fixed;
  --width: 300px;
  width: var(--width);
  left: calc(50vw - var(--width) / 2);
  top: 30vh;
  background-color: white;
  box-shadow: 1px 1px 4px dimgray;
  border-radius: 8px;
  padding: 20px;
  z-index: 9000;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--time-fast);
  transition-timing-function: ease-in-out;
}

#confirm.show {
  visibility: visible;
  transform: translateY(0);
}

.confirm-title {
  font-weight: bold;
  font-size: 20px;
}

.confirm-text {
  --tip-width: 50px;
  position: relative;
  width: 100%;
  text-indent: calc(var(--tip-width) + 5px);
  line-height: 20px;
  margin: 20px 0 30px;
}

.confirm-text::before {
  content: "警 告";
  text-indent: 0;
  position: absolute;
  left: 0;
  width: var(--tip-width);
  line-height: 20px;
  text-align: center;
  background-color: #ffc107;
  border-radius: 2px;
}

.confirm-action {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.confirm-action > div {
  width: 4em;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
}

.confirm-yes {
  color: #dc3545;
  border-color: #dc3545;
}

.confirm-yes:hover {
  color: white;
  background-color: #dc3545;
}

.confirm-no {
  color: #6c757d;
  margin-left: 6px;
  border-color: #6c757d;
}

.confirm-no:hover {
  color: white;
  background-color: #6c757d;
  border-color: #6c757d;
}

#slide-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background: linear-gradient(75deg, rgb(145, 152, 229), rgb(230, 100, 101));
  z-index: 8000;
}

#to-top {
  position: fixed;
  bottom: calc(var(--size-large) * -1);
  right: 50px;
  width: var(--size-large);
  height: var(--size-large);
  cursor: pointer;
  transition: bottom var(--time-slow);
  z-index: 8000;
}

#to-top.show {
  bottom: 70px;
}

@keyframes bob {
  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(-5px);
  }
}

@keyframes bob-float {
  100% {
    transform: translateY(-5px);
  }
}

#to-top:hover {
  animation-name: bob-float, bob;
  animation-duration: var(--time-normal), calc(3 * var(--time-normal));
  animation-delay: 0, var(--time-normal);
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
}

#login-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 6em;
  border-radius: 4px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  background-color: #28a745;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--time-normal);
  z-index: 7000;
}

body.user #login-btn {
  background-color: #dc3545;
}

#login-btn:hover {
  background-color: #218838;
}

body.user #login-btn:hover {
  background-color: #c82333;
}

#link-detail-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 8500;
  backdrop-filter: blur(1px);
}

#link-detail-layer.show {
  display: flex;
}

.link-detail-container {
  width: 350px;
  padding: 20px 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 1px 1px 4px white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-400px) scale(0);
  transition: all var(--time-normal);
  transition-timing-function: ease-in-out;
}

.link-detail-container.show {
  transform: translateY(0) scale(1);
}

.link-detail-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.link-detail-line {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid lightgray;
  border-radius: 2px;
  transition: all var(--time-normal);
}

.link-detail-line:has(:focus) {
  border-color: skyblue;
  outline: 4px solid skyblue;
}

.link-detail-line:has(.error) {
  border-color: #dc3545;
}

.link-detail-line:has(.error)::before {
  content: "请填写此字段";
  font-size: 0.8em;
  color: #bb2d3b;
  position: absolute;
  top: 24px;
  left: 4px;
}

.line-name {
  width: 5em;
  line-height: 24px;
  text-align: center;
  background-color: whitesmoke;
  transition: all var(--time-normal);
}

.link-detail-line:has(:focus)>.line-name {
  background-color: black;
  color: whitesmoke;
}

.link-detail-line>input {
  width: calc(100% - 5em);
  line-height: 24px;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 0 4px;
}

.link-detail-submit {
  width: 60%;
  line-height: 30px;
  text-align: center;
  user-select: none;
  cursor: pointer;
  color: white;
  margin-top: 30px;
  background-color: #0d6efd;
  border: 1px solid #0d6efd;
  border-radius: 4px;
}

.link-detail-submit:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.banner {
  height: 120px;
  -webkit-user-drag: none;
  display: block;
  object-fit: contain;
  margin: 70px auto 0;
}

.search-container {
  width: 50%;
  height: 42px;
  margin: 30px auto;
  padding: 4px 6px;
  position: relative;
  border-radius: 50px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px 1px rgba(0, 0, 0, 0.09);
}

.search-container:has(#relate-container.show) {
  border-radius: 10px 10px 0 0;
}

.input-container {
  width: 100%;
  padding: 6px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
}

.input-container img {
  cursor: pointer;
  width: var(--size-normal);
  height: var(--size-normal);
  background-color: white;
}

.engines-container {
  --distance: -45px;
  --ang45: calc(var(--distance) / sqrt(2));
  position: relative;
  width: var(--size-normal);
  height: var(--size-normal);
}

.engine {
  position: absolute;
  transition: transform var(--time-normal);
  border-radius: 4px;
}

.engine:not(:last-child) {
  transform: scale(0.2);
}

.engine:last-child:hover {
  transform: scale(1.1);
}

.engine.show {
  border-radius: 4px;
  box-shadow: 0 0 4px dimgray;
}

.engine:nth-child(1).show {
  transition-delay: calc(0 * var(--time-fast));
  transform: translateY(var(--distance)) scale(1);
}

.engine:nth-child(2).show {
  transition-delay: calc(1 * var(--time-fast));
  transform: translate(var(--ang45), var(--ang45)) scale(1);
}

.engine:nth-child(3).show {
  transition-delay: calc(2 * var(--time-fast));
  transform: translateX(var(--distance)) scale(1);
}

#search-content {
  width: calc(100% - 2 * (var(--size-normal) + 4px));
  padding: 0 10px;
  border: none;
  outline: none;
  line-height: 30px;
  font-size: 16px;
  background-color: white;
}

#search-image:hover {
  transition: transform var(--time-normal);
  transform: scale(0.9);
}

#relate-container {
  width: 100%;
  position: absolute;
  top: 42px;
  left: 0;
  background-color: white;
  display: none;
  border-radius: 0 0 10px 10px;
  z-index: 5000;
}

#relate-container>div {
  width: calc(50% - 1px);
}

#relate-container.show {
  display: flex;
}

#relate-container.show:has(.relate-item) {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px 1px rgba(0, 0, 0, 0.09);
}

#local-relate {
  border-right: 2px solid rgba(168, 168, 168, 0.5);
}

.relate-item {
  user-select: none;
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 4px 10px;
}

.relate-item:not(:last-child) {
  border-bottom: 1px solid lightgray;
}

#local-relate>.relate-item:last-child {
  border-radius: 0 0 0 10px;
}

#engine-relate>.relate-item:last-child {
  border-radius: 0 0 10px 0;
}

.relate-item:hover {
  background-color: #F7F7F7;
}

.relate-icon {
  width: var(--size-small);
  height: var(--size-small);
}

.relate-text {
  width: calc(100% - 2 * (8px + var(--size-small)));
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relate-delete {
  width: var(--size-small);
  height: var(--size-small);
  cursor: pointer;
}

.relate-delete:hover {
  transform: scale(1.08);
}

.link-groups-container {
  width: 80%;
  margin: 0 auto 20px;
  min-height: calc(100vh - 308px);
  transition: all var(--time-normal);
}

.link-groups-title-container {
  width: 100%;
  height: 30px;
  background-color: rgb(46, 46, 46);
  color: rgb(235, 235, 235);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 10px;
}

.link-groups-title {
  line-height: var(--size-small);
}

.link-groups-actions {
  display: flex;
  column-gap: 8px;
}

.link-groups-actions>svg {
  width: var(--size-small);
  height: var(--size-small);
  fill: white;
  cursor: pointer;
  transition: all var(--time-normal);
}

#link-group-add {
  visibility: hidden;
}

body.user #link-group-add {
  visibility: visible;
}

#link-group-add:hover {
  fill: #1AFA29;
}

.link-groups-container #link-groups-collapse {
  transform: rotateZ(90deg);
}

.link-groups-container:has(.link-group-container.expand) #link-groups-collapse {
  transform: rotateZ(0);
}

#link-groups-collapse:hover {
  fill: #1296DB;
}

#link-groups {
  width: 100%;
  margin-top: 2px;
}

#link-groups:not(:has(.sortable-chosen))>.link-group-container{
  transition: all var(--time-slow);
}

.link-group-container {
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.link-group-title-container {
  width: 100%;
  padding: 2px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  background-color: whitesmoke;
}

.link-group-title:read-only {
  width: 160px;
  border: none;
  outline: none;
  padding: 0 4px;
  cursor: pointer;
  font-weight: bold;
  border-right: 1px solid gainsboro;
  line-height: var(--size-small);
}

.link-group-title:not(:read-only) {
  width: 160px;
  border: none;
  outline: none;
  padding: 0 4px;
  font-weight: normal;
  line-height: var(--size-small);
}

.group-dragger {
  width: calc(100% - 320px);
  user-select: none;
  cursor: move;
}

.group-dragger>img {
  display: block;
  margin: 0 auto;
  width: var(--size-small);
  height: var(--size-small);
}

.link-group-actions {
  width: 160px;
  display: flex;
  justify-content: flex-end;
  column-gap: 8px;
}

.link-group-actions>svg {
  width: var(--size-small);
  height: var(--size-small);
  cursor: pointer;
  transition: all var(--time-normal);
}

.link-group-delete {
  visibility: hidden;
  fill: rgb(224, 16, 16);
  transform: rotateZ(45deg) scale(0.92);
}

body.user .link-group-delete {
  visibility: visible;
}

.link-group-delete:hover {
  transform: rotateZ(135deg) scale(1);
}

.link-group-collapse {
  fill: rgb(40, 40, 40);
}

.link-group-collapse:hover {
  fill: skyblue;
}

.link-group-container.expand .link-group-collapse {
  transform: rotateZ(0) scale(0.92);
}

.link-group-container.expand .link-group-collapse:hover {
  transform: rotateZ(0) scale(1);
}

.link-group-container.collapse .link-group-collapse {
  transform: rotateZ(90deg) scale(0.92);
}

.link-group-container.collapse .link-group-collapse:hover {
  transform: rotateZ(90deg) scale(1);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 2px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all var(--time-fast);
}

.links:not(:has(.sortable-chosen)) .link {
  transition: all var(--time-fast);
}

.link-group-container.expand .links {
  justify-content: center;
}

.link-group-container.collapse .links {
  justify-content: left;
}

.link {
  width: 108px;
  height: 118px;
  position: relative;
  user-select: none;
  border-radius: 8px;
}

.link-group-container.expand .link {
  width: 108px;
  height: 118px;
}

.link-group-container.collapse .link {
  width: 60px;
  height: 60px;
}

.link:hover {
  transition: background-color var(--time-normal);
  background-color: rgba(255, 255, 255, 0.5);
}

.links:has(.sortable-ghost) .link:hover {
  background-color: transparent;
}

.link-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  visibility: hidden;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  z-index: 2000;
}

body.user .link-group-container.expand .link:hover>.link-actions {
  visibility: visible;
}

.link-group-container.collapse .link:hover>.link-actions {
  visibility: hidden;
}

.link-actions>svg {
  width: var(--size-small);
  height: var(--size-small);
  cursor: pointer;
  fill: #808080;
  transform: scale(0.95);
  transition: all var(--time-fast);
}

.link-delete:hover {
  transform: scale(1.05);
  fill: red;
}

.link-edit:hover {
  transform: scale(1.05);
  fill: rgb(8, 108, 223);
}

.link-info {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.link-group-container.expand .link-info {
  flex-direction: column;
  justify-content: space-around;
  padding: 18px 6px 10px;
  z-index: 1000;
}

.link-group-container.collapse .link-info {
  justify-content: center;
}

body.user .link-add {
  display: flex;
}

.link-add {
  width: 108px;
  height: 118px;
  user-select: none;
  display: none;
  align-items: center;
  cursor: pointer;
  transition: transform var(--time-fast);
}

.link-add:hover {
  transform: scale(0.95);
}

.link-group-container.expand .link-add {
  width: 108px;
  height: 118px;
  flex-direction: column;
  justify-content: space-around;
  padding: 18px 6px 10px;
  z-index: 1000;
}

.link-group-container.collapse .link-add {
  width: 60px;
  height: 60px;
  justify-content: center;
}

.link-icon {
  background-color: rgb(121, 201, 199);
}

.link-group-container.expand .link-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  padding: 8px;
}

.link-group-container.collapse .link-icon {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  padding: 4px;
}

.link-name {
  width: 95px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background-color: white;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 2px 4px;
  box-shadow: 0 2px 4px lightgray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-add>.link-name {
  color: gray;
}

.link-group-container.expand .link-name {
  display: block;
}

.link-group-container.collapse .link-name {
  display: none;
}

.sortable-ghost {
  border: 1px dashed rgb(53, 52, 52);
  opacity: 0.3;
}

.footer {
  width: 100%;
  text-align: center;
  line-height: 66px;

  background-color: black;
  color: white;
}