:root {
  --ui-bg: #f5f7fb;
  --ui-ink: #172033;
  --ui-text: #313b4f;
  --ui-muted: #748197;
  --ui-line: rgba(210, 219, 232, .82);
  --ui-soft-line: rgba(229, 235, 244, .92);
  --ui-surface: rgba(255, 255, 255, .88);
  --ui-surface-strong: #ffffff;
  --ui-teal: #0f8b8d;
  --ui-blue: #3478f6;
  --ui-rose: #e86d8c;
  --ui-amber: #d99a32;
  --ui-green: #22a06b;
  --ui-red: #d95a64;
  --ui-shadow: 0 18px 48px rgba(23, 32, 51, .09);
  --ui-shadow-soft: 0 10px 28px rgba(23, 32, 51, .06);
  --ui-radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ui-bg);
}

body {
  color: var(--ui-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ui-teal);
}

a:hover {
  color: #0b6f72;
}

::selection {
  background: rgba(15, 139, 141, .18);
  color: var(--ui-ink);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: rgba(236, 241, 247, .72);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b8c6d8, #8fb7b6);
  border: 2px solid rgba(236, 241, 247, .72);
  border-radius: 999px;
}

.layui-card,
.layui-layer,
.layui-table-view,
.layui-form-select dl,
.layui-laypage a,
.layui-laypage span {
  border-radius: var(--ui-radius) !important;
}

.layui-card {
  margin-bottom: 16px;
  border: 1px solid var(--ui-soft-line);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
  backdrop-filter: blur(18px);
}

.layui-card-header {
  height: auto;
  min-height: 48px;
  padding: 15px 18px;
  border-bottom-color: var(--ui-soft-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(249, 252, 254, .9));
  color: var(--ui-ink);
  font-weight: 800;
}

.layui-card-body {
  padding: 18px;
}

.layui-btn {
  border-radius: var(--ui-radius);
  box-shadow: none;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled) {
  border: 0;
  background: linear-gradient(135deg, var(--ui-teal), #16a5a1);
  color: #fff;
}

.layui-btn-normal {
  background: linear-gradient(135deg, var(--ui-blue), #5c8df7) !important;
}

.layui-btn-warm {
  background: linear-gradient(135deg, var(--ui-amber), #e7b75a) !important;
}

.layui-btn-danger,
.layui-bg-red {
  background: linear-gradient(135deg, var(--ui-red), var(--ui-rose)) !important;
}

.layui-btn-primary {
  border-color: var(--ui-line);
  background: rgba(255, 255, 255, .78);
  color: var(--ui-text);
}

.layui-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(23, 32, 51, .11);
  filter: brightness(1.02);
}

.layui-btn-disabled,
.layui-btn-disabled:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

.layui-input,
.layui-textarea,
.layui-select {
  border-color: #dbe4ef;
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .96);
  color: var(--ui-text);
}

.layui-input {
  height: 40px;
}

.layui-textarea {
  min-height: 108px;
}

.layui-input:focus,
.layui-textarea:focus {
  border-color: var(--ui-teal) !important;
  box-shadow: 0 0 0 3px rgba(15, 139, 141, .12);
}

.layui-form-label {
  color: #445168;
  font-weight: 700;
}

.layui-form-mid.layui-word-aux,
.layui-word-aux {
  color: var(--ui-muted) !important;
}

.layui-form-switch {
  border-color: #dbe4ef;
  background: #eef3f8;
}

.layui-form-onswitch {
  border-color: var(--ui-teal);
  background-color: var(--ui-teal);
}

.layui-table-view {
  border-color: var(--ui-soft-line);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-soft);
  overflow: hidden;
}

.layui-table,
.layui-table-view .layui-table {
  color: var(--ui-text);
}

.layui-table-header,
.layui-table thead tr,
.layui-table-tool,
.layui-table-total {
  background: #f8fbfd;
}

.layui-table th {
  color: #526078;
  font-weight: 800;
}

.layui-table tbody tr:hover {
  background: #f4fbfb !important;
}

.layui-badge {
  border-radius: 999px;
  font-weight: 700;
}

.layui-layer {
  border: 1px solid rgba(226, 234, 244, .9);
  box-shadow: 0 28px 70px rgba(23, 32, 51, .22) !important;
  overflow: hidden;
}

.layui-layer-title {
  border-bottom-color: var(--ui-soft-line) !important;
  background: linear-gradient(180deg, #fff, #f8fbfd) !important;
  color: var(--ui-ink) !important;
  font-weight: 850;
}

.layui-layer-content img {
  max-width: 100%;
}

.landing-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #f6f8fc;
}

.landing-hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 246, 246, .94) 0%, rgba(239, 248, 249, .94) 42%, rgba(244, 247, 255, .96) 100%);
}

.landing-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 82%);
  pointer-events: none;
  z-index: 1;
}

.landing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.landing-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 20px;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ui-ink);
  font-size: 18px;
  font-weight: 900;
}

.landing-brand:before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ui-teal), var(--ui-blue) 58%, var(--ui-rose));
  box-shadow: 0 12px 28px rgba(15, 139, 141, .22);
}

.landing-nav-actions {
  display: flex;
  gap: 10px;
}

.landing-copy {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 92px 20px 88px;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 13px;
  border: 1px solid rgba(15, 139, 141, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: var(--ui-teal);
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(16px);
}

.landing-title {
  max-width: 820px;
  margin: 0;
  color: #121b2d;
  font-size: 52px;
  line-height: 1.12;
  font-weight: 900;
}

.landing-subtitle {
  max-width: 760px;
  margin-top: 20px;
  color: #526079;
  font-size: 17px;
  line-height: 1.9;
}

.landing-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.landing-metrics {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1140px;
  margin: -58px auto 0;
  padding: 0 20px;
}

.metric-tile,
.feature-tile,
.auth-card,
.setup-card {
  border: 1px solid rgba(218, 226, 238, .86);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(18px);
}

.metric-tile {
  padding: 18px;
}

.metric-value {
  color: var(--ui-ink);
  font-size: 24px;
  font-weight: 900;
}

.metric-label {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.6;
}

.landing-section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 20px;
}

.section-title {
  margin: 0 0 12px;
  color: var(--ui-ink);
  font-size: 28px;
  font-weight: 900;
}

.section-desc {
  max-width: 760px;
  color: var(--ui-muted);
  line-height: 1.9;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.feature-tile {
  min-height: 148px;
  padding: 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-tile:hover,
.metric-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 139, 141, .28);
  box-shadow: 0 22px 56px rgba(23, 32, 51, .11);
}

.feature-tile i {
  color: var(--ui-teal);
  font-size: 28px;
}

.feature-tile h3 {
  margin: 14px 0 8px;
  color: var(--ui-ink);
  font-size: 17px;
  font-weight: 850;
}

.feature-tile p {
  margin: 0;
  color: #647188;
  line-height: 1.8;
  font-size: 13px;
}

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 14px;
  overflow: hidden;
  background:
    linear-gradient(145deg, #fff7f5 0%, #eff8f7 44%, #f3f6ff 100%);
}

.auth-page:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.38) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none;
}

.auth-card,
.setup-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 30px;
}

.setup-card {
  max-width: 560px;
}

.auth-title {
  margin: 0 0 10px;
  color: var(--ui-ink);
  text-align: center;
  font-size: 25px;
  font-weight: 900;
}

.auth-subtitle {
  margin: 0 0 24px;
  color: var(--ui-muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
}

.auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
}

.auth-links a {
  float: none !important;
  color: #657186 !important;
  white-space: nowrap;
}

.auth-links a:last-child {
  color: var(--ui-teal) !important;
}

.setup-note {
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(15, 139, 141, .16);
  border-radius: var(--ui-radius);
  background: rgba(237, 249, 249, .74);
  color: #526079;
  font-size: 13px;
  line-height: 1.75;
}

.setup-info-item {
  padding: 13px 15px;
  margin-bottom: 15px;
  border: 1px solid var(--ui-soft-line);
  border-left: 4px solid var(--ui-rose);
  border-radius: var(--ui-radius);
  background: rgba(248, 251, 253, .82);
  word-break: break-all;
}

.setup-info-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-skin,
.user-skin {
  background:
    linear-gradient(135deg, #f8fbfb 0%, #f5f7fc 48%, #fff8f5 100%);
}

.admin-layout .layui-header,
.user-layout .layui-header {
  height: 64px;
  border-bottom: 1px solid rgba(226, 234, 244, .74);
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 10px 30px rgba(23, 32, 51, .07);
  backdrop-filter: blur(20px);
}

.admin-layout .layui-logo,
.user-layout .layui-logo {
  width: 220px;
  height: 64px;
  line-height: 64px;
  color: var(--ui-ink) !important;
  font-weight: 900;
  box-shadow: none;
}

.admin-logo,
.user-layout .layui-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 18px;
}

.admin-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ui-teal), var(--ui-blue) 58%, var(--ui-rose));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.user-layout .layui-logo:before {
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ui-teal), var(--ui-blue) 58%, var(--ui-rose));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.admin-layout .layui-nav,
.user-layout .layui-nav {
  background: transparent;
}

.admin-layout .layui-layout-right .layui-nav-item > a,
.user-layout .layui-layout-right .layui-nav-item > a {
  color: #526079;
  font-weight: 700;
}

.admin-layout .layui-layout-right .layui-nav-item > a:hover,
.user-layout .layui-layout-right .layui-nav-item > a:hover {
  color: var(--ui-teal);
}

.admin-layout .layui-side,
.user-layout .layui-side {
  top: 64px;
  width: 220px;
  border-right: 1px solid rgba(226, 234, 244, .74);
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 16px 0 36px rgba(23, 32, 51, .05);
  backdrop-filter: blur(20px);
}

.admin-layout .layui-body,
.user-layout .layui-body {
  top: 64px;
  left: 220px;
  background: transparent !important;
}

.admin-body {
  padding: 0 !important;
}

.admin-page-shell {
  padding: 20px;
}

.admin-side-head,
.user-side-head {
  padding: 16px 18px 12px;
}

.admin-side-title,
.user-side-title {
  color: var(--ui-ink);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-side-sub,
.user-side-sub {
  margin-top: 4px;
  color: var(--ui-muted);
  font-size: 12px;
}

.admin-layout .layui-nav-tree,
.user-layout .layui-nav-tree {
  width: 100%;
  background: transparent !important;
}

.admin-layout .layui-nav-tree .layui-nav-item,
.user-layout .layui-nav-tree .layui-nav-item {
  padding: 0 10px;
}

.admin-layout .layui-nav-tree .layui-nav-item a,
.user-layout .layui-nav-tree .layui-nav-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin: 4px 0;
  padding: 0 12px !important;
  border-radius: var(--ui-radius);
  color: #526079 !important;
  font-size: 14px;
  font-weight: 750;
}

.admin-layout .layui-nav-tree .layui-nav-item a i,
.user-layout .layui-nav-tree .layui-nav-item a i {
  width: 18px;
  color: #7b879a;
  font-size: 16px;
  text-align: center;
}

.admin-layout .layui-nav-tree .layui-nav-item a:hover,
.user-layout .layui-nav-tree .layui-nav-item a:hover {
  background: rgba(15, 139, 141, .08) !important;
  color: var(--ui-teal) !important;
}

.admin-layout .layui-nav-tree .layui-nav-item.layui-this a,
.user-layout .layui-nav-tree .layui-nav-item.layui-this a {
  background: linear-gradient(135deg, rgba(15, 139, 141, .14), rgba(52, 120, 246, .10)) !important;
  color: var(--ui-teal) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 139, 141, .14);
}

.admin-layout .layui-nav-tree .layui-nav-item.layui-this a i,
.user-layout .layui-nav-tree .layui-nav-item.layui-this a i {
  color: var(--ui-teal);
}

.admin-layout .layui-nav-tree .layui-this:after,
.user-layout .layui-nav-tree .layui-this:after {
  display: none;
}

.mobile-nav-toggle,
.user-mobile-toggle {
  display: none;
}

.site-mobile-shade,
.user-mobile-shade {
  display: none;
}

.admin-page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid rgba(218, 226, 238, .86);
  border-radius: var(--ui-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,249,249,.72) 54%, rgba(255,248,245,.76));
  box-shadow: var(--ui-shadow-soft);
}

.admin-page-hero h1 {
  margin: 0 0 7px;
  color: var(--ui-ink);
  font-size: 24px;
  font-weight: 900;
}

.admin-page-hero p {
  margin: 0;
  color: var(--ui-muted);
  line-height: 1.7;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-stat-card,
.stat-card {
  min-height: 108px;
  padding: 18px;
  border: 1px solid rgba(218, 226, 238, .86);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--ui-shadow-soft);
}

.admin-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(15, 139, 141, .1);
  color: var(--ui-teal);
}

.admin-stat-value,
.stat-value {
  color: var(--ui-ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.admin-stat-label,
.stat-label {
  margin-top: 8px;
  color: var(--ui-muted);
  font-size: 12px;
}

.admin-soft-panel {
  padding: 18px;
  border: 1px solid rgba(218, 226, 238, .86);
  border-radius: var(--ui-radius);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--ui-shadow-soft);
}

.admin-toolbar,
.soft-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(226, 234, 244, .82);
  border-radius: var(--ui-radius);
  background: rgba(248, 251, 253, .76);
}

.account-tabs .layui-tab-title,
.admin-config-card .layui-tab-title {
  border-bottom-color: var(--ui-soft-line);
}

.account-tabs .layui-tab-title li,
.admin-config-card .layui-tab-title li {
  color: #526079;
  font-weight: 800;
}

.account-tabs .layui-tab-title .layui-this,
.admin-config-card .layui-tab-title .layui-this {
  color: var(--ui-teal);
}

.account-tabs .layui-tab-title .layui-this:after,
.admin-config-card .layui-tab-title .layui-this:after {
  border-color: var(--ui-teal);
}

@media screen and (max-width: 1024px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 900px) {
  .landing-title {
    font-size: 38px;
  }

  .landing-metrics,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .admin-layout .layui-side,
  .user-layout .layui-side {
    transform: translate3d(-260px, 0, 0);
    transition: transform .25s ease;
    z-index: 10000;
  }

  .admin-layout .layui-body,
  .user-layout .layui-body {
    left: 0 !important;
    width: 100%;
  }

  .admin-layout .layui-logo,
  .user-layout .layui-logo {
    width: auto !important;
    max-width: calc(100vw - 160px);
    padding: 0 10px;
    font-size: 16px;
  }

  .mobile-nav-toggle,
  .user-mobile-toggle {
    position: absolute;
    left: 128px;
    top: 0;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 64px;
    color: var(--ui-ink);
  }

  .mobile-nav-toggle i,
  .user-mobile-toggle i {
    font-size: 21px;
  }

  .site-mobile-shade,
  .user-mobile-shade {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: rgba(23, 32, 51, .42);
    cursor: pointer;
  }

  .mobile-show .layui-side,
  .user-layout.mobile-show .layui-side {
    transform: translate3d(0, 0, 0);
  }

  .mobile-show .site-mobile-shade,
  .user-layout.mobile-show .user-mobile-shade {
    display: block;
  }

  .admin-page-shell {
    padding: 12px;
  }

  .admin-page-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .layui-form-item .layui-input-inline {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }

  .layui-form-label {
    width: 100%;
    padding: 9px 0;
    text-align: left;
  }

  .layui-input-block {
    margin-left: 0;
  }
}

@media screen and (max-width: 560px) {
  .landing-hero {
    min-height: 620px;
  }

  .landing-nav {
    padding: 18px 14px;
  }

  .landing-copy {
    padding: 62px 16px 82px;
  }

  .landing-title {
    font-size: 32px;
  }

  .landing-subtitle {
    font-size: 15px;
  }

  .landing-actions .layui-btn,
  .landing-nav-actions .layui-btn {
    flex: 1 1 auto;
  }

  .landing-metrics,
  .feature-grid,
  .admin-stat-grid {
    grid-template-columns: 1fr;
  }

  .auth-card,
  .setup-card {
    padding: 24px 18px;
  }

  .auth-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .layui-layer {
    max-width: calc(100vw - 18px);
  }

  .layui-table-view {
    overflow-x: auto;
  }
}