/* Common Styles */
html {
  background-color: #fff;
  background-attachment: fixed;
  background-image: url("data:image/png;base64,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");
}

body {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
}

.wrapper {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

h2 {
  text-align: center;
}

a {
  text-decoration: none;
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}

p {
  text-align: left;
  line-height: 1.6;
}

/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
  font-size: 14px;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

td p {
  padding: 0;
  margin: 0;
}

/* Form Styles */
form {
  border: 1px solid #ddd;
  display: grid;
  grid-gap: 15px;
  padding: 20px;
  border-radius: 5px;
  background-color: #fdfdfd;
}

form label {
  font-weight: bold;
}

form input[type="text"],
form input[type="password"],
form input[type="class"],
form textarea,
form select {
  padding: 8px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

form textarea {
  min-height: 80px;
  resize: vertical;
}

form input[type="submit"] {
  background-color: #28a745;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  justify-self: start;
}

form input[type="submit"]:hover {
  background-color: #218838;
}

form input[type="checkbox"] {
  margin-right: 5px;
}

/* Button & Link Styles */
.add {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.add a {
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  padding: 8px 12px;
  border-radius: 5px;
}

.add a:hover {
  background-color: #0056b3;
}

.node-list {
  background-color: #ff9800 !important;
}

.node-list:hover {
  background-color: #e68900 !important;
}

.dashboard {
  background-color: #28a745 !important;
  margin-left: auto;
}

.dashboard:hover {
  background-color: #218838 !important;
}

.conv,
.del,
.mod,
.qry,
.send,
.active,
.open,
.traffic,
.mtraffic {
  display: inline-block;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  margin: 2px;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
}

.del {
  color: #dc3545;
}

.mod {
  color: #28a745;
}

.qry {
  color: #6c757d;
}

.send {
  color: #ff9800;
}

.active {
  color: #007bff;
}

.open {
  color: #fd7e14;
}

.traffic {
  color: #6f42c1;
}

.conv {
  color: #6f42c1;
}

.mtraffic {
  color: #ff9800;
}

.del:hover {
  background-color: #dc3545;
  border-color: #dc3545;
}

.mod:hover {
  background-color: #28a745;
  border-color: #28a745;
}

.qry:hover {
  background-color: #6c757d;
  border-color: #6c757d;
}

.send:hover {
  background-color: #ff9800;
  border-color: #ff9800;
}

.active:hover {
  background-color: #007bff;
  border-color: #007bff;
}

.open:hover {
  background-color: #fd7e14;
  border-color: #fd7e14;
}

.conv:hover {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.traffic:hover {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.mtraffic:hover {
  background-color: #ff9800;
  border-color: #ff9800;
}

.send:hover,
.qry:hover,
.mod:hover,
.del:hover,
.active:hover,
.open:hover,
.traffic:hover,
.mtraffic:hover,
.conv:hover {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

/* Other */
.speedtest {
  color: #000;
}

.copyright {
  text-align: center;
  margin-top: 30px;
  color: #888;
  font-size: 12px;
}

.emoji {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  margin: 0 0.05em 0 0.1em;
}

/* Toast 提示框的样式 */
.ajax-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  color: #fff;
  z-index: 1060;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(20px);
  font-size: 1rem;
}

.ajax-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.ajax-toast.success {
  background-color: #28a745;
}

.ajax-toast.error {
  background-color: #dc3545;
}

/* 浮窗容器，固定在屏幕右上角 */
#flash-message-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  width: 300px;
}

.flash-message {
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.flash-message.fade-out {
  opacity: 0;
}

.flash-message.success {
  background-color: #28a745;
}

.flash-message.error {
  background-color: #dc3545;
}

button:disabled,
a.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
  color: #6c757d !important;
}

button:disabled:hover,
a.disabled:hover {
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
  color: #6c757d !important;
  cursor: not-allowed;
}

a.disabled {
  pointer-events: none;
}