:root {
  --sakura-bg: #fdf9ff;
  --sakura-panel: #fffefc;
  --sakura-primary: #f47bb8;
  --sakura-primary-deep: #e15ca0;
  --sakura-accent: #ffc7df;
  --sakura-gold: #f8d98a;
  --sakura-text: #5a4661;
  --sakura-border: #f7dbea;
  --sakura-sky: #dff2ff;
  --sakura-mint: #dff7ea;
}

html,
body {
  background:
    radial-gradient(1200px 500px at 90% -10%, rgba(241, 212, 230, 0.65), transparent 58%),
    radial-gradient(900px 380px at -10% -5%, rgba(212, 236, 255, 0.78), transparent 54%),
    linear-gradient(180deg, #edf8ff 0%, #f9f4ff 38%, #fff7f9 100%) !important;
  color: var(--sakura-text) !important;
}

a,
.text-primary,
.main-color,
.theme-color {
  color: var(--sakura-primary) !important;
}

.btn-primary,
.btn.btn-primary,
button,
input[type="submit"],
.layui-layer-btn0 {
  background: linear-gradient(135deg, #f79dca 0%, var(--sakura-primary) 55%, var(--sakura-primary-deep) 100%) !important;
  border-color: var(--sakura-primary) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 18px rgba(223, 115, 175, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.25s ease;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button:hover,
input[type="submit"]:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.card,
.panel,
.box,
.modal-content,
.layui-layer,
.list-group-item,
.navbar,
.main-header .navbar,
.main-sidebar,
.content-wrapper,
.right-side {
  background-color: rgba(255, 254, 252, 0.92) !important;
  border-color: var(--sakura-border) !important;
}

input,
select,
textarea,
.form-control {
  border-color: var(--sakura-border) !important;
  border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--sakura-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 179, 0.2) !important;
}

.skin-blue .main-header .logo,
.skin-blue .main-header .navbar,
.skin-black .main-header .navbar,
.skin-purple .main-header .navbar,
.skin-red .main-header .navbar,
.skin-green .main-header .navbar {
  background: linear-gradient(100deg, #90d8ff 0%, #f4a7cd 52%, #f192bf 100%) !important;
}

.main-sidebar,
.sidebar-menu > li > a {
  background: linear-gradient(180deg, #fff5fb, #fffaf4) !important;
  color: #765970 !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li:hover > a {
  background: linear-gradient(90deg, #ffdced, #ffeecd) !important;
  color: #9b4f7f !important;
}

.app,
.container,
.warp,
.wrapper {
  position: relative;
}

.card,
.panel,
.box,
.list-group-item {
  border-radius: 18px !important;
  border: 1px solid rgba(247, 219, 234, 0.9) !important;
  box-shadow:
    0 10px 24px rgba(194, 149, 179, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
  backdrop-filter: blur(2px);
}

h1,
h2,
h3,
.logo-lg,
.logo-mini,
.navbar-brand {
  color: #e97aaf !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 14px rgba(235, 141, 189, 0.2);
  letter-spacing: 0.3px;
}

.badge,
.label,
.tag,
.alert-info,
.progress-bar {
  background: linear-gradient(120deg, #f6b3d5, var(--sakura-gold)) !important;
  color: #6b5063 !important;
  border-color: #f6d5e7 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(700px 260px at 25% 15%, rgba(255, 255, 255, 0.68), transparent 60%),
    radial-gradient(700px 260px at 68% 18%, rgba(255, 255, 255, 0.62), transparent 60%),
    linear-gradient(180deg, rgba(154, 215, 255, 0.26) 0%, rgba(255, 212, 232, 0.22) 50%, rgba(208, 242, 220, 0.2) 100%);
  opacity: 0.95;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 207, 230, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(218, 246, 234, 0.4) 0 1px, transparent 2px);
  background-size: 120px 120px, 180px 180px, 210px 210px;
  background-position: 20px 40px, 90px 160px, 30px 70px;
  opacity: 0.32;
  animation: sakuraSparkle 12s linear infinite;
}

body > * {
  position: relative;
  z-index: 1;
}

.container::before,
.wrapper::before,
.content-wrapper::before {
  content: "●  ○  ●";
  position: absolute;
  right: 14px;
  top: 8px;
  font-size: 13px;
  letter-spacing: 4px;
  color: rgba(236, 151, 194, 0.35);
  pointer-events: none;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-color: #f9dfea !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 236, 246, 0.38) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.pagination > .active > a,
.pagination > .active > span {
  background: linear-gradient(120deg, #f8b5d5, #f3a4ca) !important;
  border-color: #ef9bc4 !important;
  color: #fff !important;
}

.dropdown-menu {
  border-radius: 14px !important;
  border-color: #f6dcea !important;
  box-shadow: 0 12px 26px rgba(199, 147, 179, 0.22) !important;
}

.hero,
.hero-banner,
.banner,
.index-banner,
.jumbotron {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  padding: clamp(20px, 5vw, 54px) !important;
  background:
    radial-gradient(450px 170px at 14% 10%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(420px 200px at 86% 12%, rgba(255, 252, 218, 0.58), transparent 60%),
    linear-gradient(135deg, #b4e5ff 0%, #ffd2e8 45%, #ffe9bc 100%) !important;
  box-shadow: 0 14px 34px rgba(148, 156, 190, 0.24) !important;
  border: 1px solid rgba(255, 245, 255, 0.8) !important;
}

.hero::before,
.hero-banner::before,
.banner::before,
.index-banner::before,
.jumbotron::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(255, 255, 255, 0.7) 0 28px, transparent 30px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.64) 0 24px, transparent 26px),
    radial-gradient(circle at 52% 70%, rgba(255, 255, 255, 0.42) 0 30px, transparent 32px);
  animation: heroCloudFloat 16s ease-in-out infinite;
}

.hero h1,
.hero-banner h1,
.banner h1,
.index-banner h1,
.jumbotron h1 {
  color: #ffffff !important;
  text-shadow: 0 3px 20px rgba(143, 122, 176, 0.35) !important;
}

.btn,
.button,
.card,
.panel,
.box,
.list-group-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(231, 118, 174, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.card:hover,
.panel:hover,
.box:hover,
.list-group-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 30px rgba(197, 151, 180, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

body.login-page,
.login-page,
.signin-page,
.page-login {
  background:
    radial-gradient(900px 340px at 50% -8%, rgba(255, 255, 255, 0.84), transparent 60%),
    linear-gradient(180deg, #b8e7ff 0%, #f6d7ec 42%, #fff1cb 100%) !important;
}

.login-box,
.login-panel,
.signin-box,
.auth-box {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(255, 236, 245, 0.95) !important;
  border-radius: 24px !important;
  box-shadow:
    0 20px 42px rgba(157, 151, 186, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
  backdrop-filter: blur(4px);
}

.login-logo,
.signin-title,
.auth-title {
  color: #e584b6 !important;
  text-shadow: 0 4px 12px rgba(255, 173, 206, 0.35) !important;
}

@keyframes heroCloudFloat {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(6px) translateY(-4px); }
  100% { transform: translateX(0) translateY(0); }
}

@keyframes sakuraSparkle {
  0% { transform: translateY(0); opacity: 0.18; }
  50% { transform: translateY(-6px); opacity: 0.28; }
  100% { transform: translateY(0); opacity: 0.18; }
}