@charset "UTF-8";
html.dark-mode {
  color-scheme: dark;
}

html.dark-mode {
  color-scheme: dark;
}

html.dark-mode {
  color-scheme: dark;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sakuraPetals {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 3rem;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.1);
  position: relative;
  overflow: hidden;
}
.form-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #06b6d4);
}

input[type=text],
input[type=password],
input[type=email],
input[type=search],
textarea,
select {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(99, 102, 241, 0.15);
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  font-size: 1rem;
  padding: 1rem 1.5rem;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=search]:disabled,
textarea:disabled,
select:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  background: #ffffff;
  transform: translateY(-2px);
}
input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=search]:hover,
textarea:hover,
select:hover {
  border-color: rgba(99, 102, 241, 0.3);
}

input[type=checkbox],
input[type=radio] {
  accent-color: #6366f1;
  transform: scale(1.2);
}

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(135deg, #6366f1, rgb(52.2, 56.1, 236.8));
  color: #ffffff;
  border: none;
  padding: 1rem 2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button:focus,
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
button::before,
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
button:hover,
.btn:hover {
  background: linear-gradient(135deg, rgb(75.6, 79.05, 238.9), rgb(28.8, 33.15, 234.7));
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}
button:hover::before,
.btn:hover::before {
  left: 100%;
}
button:active,
.btn:active {
  transform: translateY(-1px);
}
button.btn-secondary,
.btn.btn-secondary {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}
button.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
button.btn-success,
.btn.btn-success {
  background: linear-gradient(135deg, #10b981, rgb(11.9402985075, 138.0597014925, 96.2686567164));
}
button.btn-success:hover,
.btn.btn-success:hover {
  background: linear-gradient(135deg, rgb(13.9701492537, 161.5298507463, 112.6343283582), rgb(9.9104477612, 114.5895522388, 79.9029850746));
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #0f172a;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}
.form-group .form-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(99, 102, 241, 0.6);
  font-size: 1.125rem;
  pointer-events: none;
  z-index: 2;
}
.form-group input {
  padding-left: calc(1.5rem + 2rem);
}
.form-group .form-help {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgb(55.2631578947, 84.7368421053, 154.7368421053);
}

.form-error input {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.error-message {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.error-message::before {
  content: "⚠";
  font-size: 1rem;
}

html.dark-mode .form-container {
  background: rgb(25.7368421053, 39.4631578947, 72.0631578947);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
html.dark-mode input[type=text],
html.dark-mode input[type=password],
html.dark-mode input[type=email],
html.dark-mode input[type=search],
html.dark-mode textarea,
html.dark-mode select {
  background: rgba(21.7105263158, 33.2894736842, 60.7894736842, 0.8);
  border-color: rgba(99, 102, 241, 0.2);
  color: #e2e8f0;
}
html.dark-mode input[type=text]:focus,
html.dark-mode input[type=password]:focus,
html.dark-mode input[type=email]:focus,
html.dark-mode input[type=search]:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  background: rgb(21.7105263158, 33.2894736842, 60.7894736842);
  border-color: rgb(192.6, 193.8, 249.4);
}
html.dark-mode input[type=text]:hover,
html.dark-mode input[type=password]:hover,
html.dark-mode input[type=email]:hover,
html.dark-mode input[type=search]:hover,
html.dark-mode textarea:hover,
html.dark-mode select:hover {
  border-color: rgba(99, 102, 241, 0.4);
}
html.dark-mode label {
  color: #e2e8f0;
}
html.dark-mode .form-help {
  color: rgb(158.7727272727, 178.6818181818, 205.2272727273);
}

html.dark-mode {
  color-scheme: dark;
}

html.dark-mode {
  color-scheme: dark;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sakuraPetals {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}
.nav {
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 1020;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}
@media (min-width: 768px) {
  .nav {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.nav a {
  text-decoration: none;
  color: #0f172a;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav a:hover {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
  transform: translateY(-2px);
}
.nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #06b6d4);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav a:hover::after {
  width: 80%;
}
.nav img.logo {
  width: 120px;
  height: auto;
  transition: transform 0.3s ease;
}
.nav img.logo:hover {
  transform: scale(1.05);
}
.nav #mode-toggle {
  background: none;
  border: 2px solid rgba(99, 102, 241, 0.2);
  cursor: pointer;
  font-size: 18px;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.nav #mode-toggle:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.05);
}

html.dark-mode .nav {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
html.dark-mode .nav a {
  color: #e2e8f0;
}
html.dark-mode .nav a:hover {
  color: rgb(192.6, 193.8, 249.4);
  background: rgba(99, 102, 241, 0.1);
}
html.dark-mode .nav #mode-toggle {
  border-color: rgba(99, 102, 241, 0.3);
  color: #e2e8f0;
}
html.dark-mode .nav #mode-toggle:hover {
  border-color: rgb(192.6, 193.8, 249.4);
  background: rgba(99, 102, 241, 0.1);
}

html.dark-mode {
  color-scheme: dark;
}

html.dark-mode {
  color-scheme: dark;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sakuraPetals {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}
.footer {
  padding-left: 1rem;
  padding-right: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, rgb(242.8068181818, 245.3295454545, 248.6931818182) 100%);
  color: #0f172a;
  text-align: center;
  padding: 1.5rem 0.5rem;
  font-size: 0.875rem;
  margin-top: auto;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(99, 102, 241, 0.1);
}
@media (min-width: 768px) {
  .footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #06b6d4, #6366f1);
}
.footer .footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer .footer-section h3 {
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  margin-bottom: 1rem;
  color: #0f172a;
  font-weight: 600;
}
.footer .footer-section p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: rgb(35.1315789474, 53.8684210526, 98.3684210526);
}
.footer .footer-links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer .footer-links li {
  position: relative;
}
.footer .footer-links li::after {
  content: "•";
  position: absolute;
  right: -1rem;
  color: rgba(15, 23, 42, 0.4);
}
.footer .footer-links li:last-child::after {
  display: none;
}
.footer a {
  color: rgb(28.4210526316, 43.5789473684, 79.5789473684);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 0.375rem;
}
.footer a:hover {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  transform: translateY(-2px);
}
.footer .footer-bottom {
  border-top: 1px solid rgba(15, 23, 42, 0.15);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: rgb(48.5526315789, 74.4473684211, 135.9473684211);
}
.footer .social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.08);
  border: 2px solid rgba(99, 102, 241, 0.15);
  font-size: 1.125rem;
  color: #6366f1;
}
.footer .social-links a:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  transform: translateY(-3px) scale(1.1);
  color: #6366f1;
}
.footer #mode-toggle {
  background: rgba(99, 102, 241, 0.08);
  border: 2px solid rgba(99, 102, 241, 0.15);
  color: #0f172a;
  cursor: pointer;
  font-size: 18px;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  margin-top: 1rem;
}
.footer #mode-toggle:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}

html.dark-mode .footer {
  background: linear-gradient(135deg, #0f172a 0%, rgb(21.7105263158, 33.2894736842, 60.7894736842) 100%);
  color: #e2e8f0;
  border-top-color: rgba(99, 102, 241, 0.2);
}
html.dark-mode .footer .footer-section h3 {
  color: #ffffff;
}
html.dark-mode .footer .footer-section p {
  color: rgb(192.3863636364, 205.3409090909, 222.6136363636);
}
html.dark-mode .footer .footer-links li::after {
  color: rgba(226, 232, 240, 0.5);
}
html.dark-mode .footer a {
  color: #e2e8f0;
}
html.dark-mode .footer a:hover {
  color: rgb(192.6, 193.8, 249.4);
  background: rgba(99, 102, 241, 0.1);
}
html.dark-mode .footer .footer-bottom {
  border-top-color: rgba(226, 232, 240, 0.2);
  color: rgb(158.7727272727, 178.6818181818, 205.2272727273);
}
html.dark-mode .footer .social-links a {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #e2e8f0;
}
html.dark-mode .footer .social-links a:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  color: rgb(192.6, 193.8, 249.4);
}
html.dark-mode .footer #mode-toggle {
  border-color: rgba(99, 102, 241, 0.3);
  color: #e2e8f0;
  background: rgba(99, 102, 241, 0.1);
}
html.dark-mode .footer #mode-toggle:hover {
  border-color: rgb(192.6, 193.8, 249.4);
  background: rgba(99, 102, 241, 0.15);
}

html.dark-mode {
  color-scheme: dark;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sakuraPetals {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}
html.dark-mode {
  color-scheme: dark;
}

html.dark-mode {
  color-scheme: dark;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sakuraPetals {
  0% {
    transform: translateY(100vh) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
  }
}
html.sakura-mode {
  color-scheme: light;
}
html.sakura-mode body {
  overflow-x: visible !important;
  overflow-y: auto !important;
  position: relative !important;
  background: linear-gradient(135deg, #fdf9fb 0%, rgb(254.95625, 254.65, 254.34375) 100%);
  color: #4a1e3a;
}
html.sakura-mode body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 183, 197, 0.05) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(255, 224, 230, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
}
html.sakura-mode .nav {
  background: rgba(255, 255, 255, 0.95) !important;
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 107, 157, 0.2);
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
}
html.sakura-mode .nav img.logo {
  display: block !important;
  width: 120px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1021 !important;
}
html.sakura-mode .nav ul {
  display: flex !important;
  visibility: visible !important;
}
html.sakura-mode .nav a {
  color: #4a1e3a !important;
  display: flex !important;
}
html.sakura-mode .nav a:hover {
  color: #ff6b9d;
  background: rgba(255, 107, 157, 0.1);
}
html.sakura-mode .nav #mode-toggle {
  border-color: rgba(255, 107, 157, 0.3);
  color: #ff6b9d;
  display: flex !important;
}
html.sakura-mode .nav #mode-toggle:hover {
  border-color: #ff6b9d;
  background: rgba(255, 107, 157, 0.1);
}
html.sakura-mode main {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}
html.sakura-mode .footer {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: auto !important;
}
html.sakura-mode .footer {
  background: linear-gradient(135deg, #fce4ec, #f8f0f5);
  color: #4a1e3a;
  border-top: 1px solid rgba(255, 107, 157, 0.2);
}
html.sakura-mode .footer::before {
  background: linear-gradient(90deg, #ff6b9d, #f8bbd9, #81c784);
}
html.sakura-mode .footer .footer-section h3 {
  color: #4a1e3a;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .footer .footer-section p {
  color: rgb(146.5769230769, 59.4230769231, 114.8846153846);
}
html.sakura-mode .footer .footer-links li::after {
  color: rgba(255, 107, 157, 0.6);
}
html.sakura-mode .footer a {
  color: #4a1e3a;
}
html.sakura-mode .footer a:hover {
  color: #ff6b9d;
  background: rgba(255, 107, 157, 0.1);
}
html.sakura-mode .footer .social-links a {
  background: rgba(255, 107, 157, 0.1);
  border-color: rgba(255, 107, 157, 0.3);
  color: #ff6b9d;
}
html.sakura-mode .footer .social-links a:hover {
  background: rgba(255, 107, 157, 0.2);
  border-color: #ff6b9d;
  color: #ff6b9d;
}
html.sakura-mode .footer #mode-toggle {
  border-color: rgba(255, 107, 157, 0.3);
  color: #4a1e3a;
  background: rgba(255, 107, 157, 0.1);
}
html.sakura-mode .footer #mode-toggle:hover {
  border-color: #ff6b9d;
  background: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .form-container {
  background: #ffffff;
  border-color: rgba(255, 107, 157, 0.2);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .form-container::before {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode input[type=text],
html.sakura-mode input[type=password],
html.sakura-mode input[type=email],
html.sakura-mode input[type=search],
html.sakura-mode textarea,
html.sakura-mode select {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
  color: #4a1e3a;
}
html.sakura-mode input[type=text]:focus,
html.sakura-mode input[type=password]:focus,
html.sakura-mode input[type=email]:focus,
html.sakura-mode input[type=search]:focus,
html.sakura-mode textarea:focus,
html.sakura-mode select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode input[type=text]:disabled,
html.sakura-mode input[type=password]:disabled,
html.sakura-mode input[type=email]:disabled,
html.sakura-mode input[type=search]:disabled,
html.sakura-mode textarea:disabled,
html.sakura-mode select:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode input[type=text]:focus,
html.sakura-mode input[type=password]:focus,
html.sakura-mode input[type=email]:focus,
html.sakura-mode input[type=search]:focus,
html.sakura-mode textarea:focus,
html.sakura-mode select:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode input[type=text]:hover,
html.sakura-mode input[type=password]:hover,
html.sakura-mode input[type=email]:hover,
html.sakura-mode input[type=search]:hover,
html.sakura-mode textarea:hover,
html.sakura-mode select:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode label {
  color: #4a1e3a;
}
html.sakura-mode button,
html.sakura-mode .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  color: #ffffff;
  border: none;
  position: relative;
  overflow: hidden;
}
html.sakura-mode button:disabled,
html.sakura-mode .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html.sakura-mode button:focus,
html.sakura-mode .btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
html.sakura-mode button::before,
html.sakura-mode .btn::before {
  content: "🌸";
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 40px;
  opacity: 0;
  transition: all 0.3s ease;
  transform: rotate(-45deg);
}
html.sakura-mode button:hover,
html.sakura-mode .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode button:hover::before,
html.sakura-mode .btn:hover::before {
  opacity: 0.3;
  top: -10px;
  right: -10px;
  transform: rotate(0deg);
}
html.sakura-mode button.btn-secondary,
html.sakura-mode .btn.btn-secondary {
  background: linear-gradient(135deg, #e8c5dd, #d4a5c7);
}
html.sakura-mode button.btn-secondary:hover,
html.sakura-mode .btn.btn-secondary:hover {
  background: linear-gradient(135deg, #d4a5c7, #b87faa);
}
html.sakura-mode button.btn-success,
html.sakura-mode .btn.btn-success {
  background: linear-gradient(135deg, #81c784, rgb(93.6923076923, 183.3076923077, 97.532967033));
}
html.sakura-mode button.btn-success:hover,
html.sakura-mode .btn.btn-success:hover {
  background: linear-gradient(135deg, rgb(111.3461538462, 191.1538461538, 114.7664835165), rgb(77.3846153846, 174.1153846154, 81.5302197802));
}
html.sakura-mode button.btn-small,
html.sakura-mode .btn.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  color: #ffffff;
  border: none;
  position: relative;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
html.sakura-mode button.btn-small:disabled,
html.sakura-mode .btn.btn-small:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html.sakura-mode button.btn-small:focus,
html.sakura-mode .btn.btn-small:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
html.sakura-mode button.btn-small::before,
html.sakura-mode .btn.btn-small::before {
  content: "🌸";
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 40px;
  opacity: 0;
  transition: all 0.3s ease;
  transform: rotate(-45deg);
}
html.sakura-mode button.btn-small:hover,
html.sakura-mode .btn.btn-small:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode button.btn-small:hover::before,
html.sakura-mode .btn.btn-small:hover::before {
  opacity: 0.3;
  top: -10px;
  right: -10px;
  transform: rotate(0deg);
}
html.sakura-mode button.btn-icon,
html.sakura-mode .btn.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  color: #ffffff;
  border: none;
  position: relative;
  overflow: hidden;
  width: auto;
  height: auto;
  min-width: 32px;
  min-height: 32px;
}
html.sakura-mode button.btn-icon:disabled,
html.sakura-mode .btn.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html.sakura-mode button.btn-icon:focus,
html.sakura-mode .btn.btn-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
html.sakura-mode button.btn-icon::before,
html.sakura-mode .btn.btn-icon::before {
  content: "🌸";
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 40px;
  opacity: 0;
  transition: all 0.3s ease;
  transform: rotate(-45deg);
}
html.sakura-mode button.btn-icon:hover,
html.sakura-mode .btn.btn-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode button.btn-icon:hover::before,
html.sakura-mode .btn.btn-icon:hover::before {
  opacity: 0.3;
  top: -10px;
  right: -10px;
  transform: rotate(0deg);
}
html.sakura-mode .form-help {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .error-message {
  color: #f06292;
  background: rgba(240, 98, 146, 0.15);
  border-color: rgba(240, 98, 146, 0.4);
}
html.sakura-mode .error-message::before {
  content: "🌸⚠";
}
html.sakura-mode .success-message {
  background: rgba(129, 199, 132, 0.15);
  color: rgb(69.5384615385, 156.4615384615, 73.2637362637);
  border-color: rgba(129, 199, 132, 0.4);
}
html.sakura-mode .auth-container .auth-header h1 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .auth-container .auth-header .subtitle {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .admin-container .admin-header {
  background: linear-gradient(135deg, #ffffff, rgb(254.6375, 252.1, 249.5625));
  border-bottom-color: #fce4ec;
}
html.sakura-mode .admin-container .admin-header::before {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .admin-container .admin-header h1 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .admin-container .admin-header .subtitle {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .admin-container .admin-content {
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .admin-container .admin-section {
  border-bottom-color: #fce4ec;
}
html.sakura-mode .admin-container .admin-section:hover {
  background: rgb(254.6375, 252.1, 249.5625);
}
html.sakura-mode .admin-container .admin-section:hover::before {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .admin-container .admin-section h2 {
  color: #4a1e3a;
}
html.sakura-mode .admin-container .admin-section h2::before {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .admin-container .admin-section .admin-form {
  background: rgba(255, 107, 157, 0.05);
  border-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .admin-container .admin-section .admin-list li {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .admin-container .admin-section .admin-list li:hover {
  background: #ffffff;
  border-color: rgba(255, 107, 157, 0.4);
}
html.sakura-mode .admin-container .admin-section .admin-list li .item-content i {
  color: #ff6b9d;
}
html.sakura-mode .admin-container .admin-section .admin-list li .item-details .item-title {
  color: #4a1e3a;
}
html.sakura-mode .admin-container .admin-section .admin-list li .item-details .item-description {
  color: rgb(146.5769230769, 59.4230769231, 114.8846153846);
}
html.sakura-mode .admin-container .admin-section .admin-list li .item-actions a {
  background: linear-gradient(135deg, #f06292, rgb(235.5523255814, 51.4476744186, 113.6802325581));
}
html.sakura-mode .admin-container .admin-section .admin-list li .item-actions a:hover {
  background: linear-gradient(135deg, rgb(237.7761627907, 74.7238372093, 129.8401162791), rgb(233.3284883721, 28.1715116279, 97.5203488372));
}
html.sakura-mode .project-table .projects-header,
html.sakura-mode .projects-header .projects-header,
html.sakura-mode .search-section .projects-header,
html.sakura-mode .table-container .projects-header {
  background: linear-gradient(135deg, #ffffff, rgb(254.6375, 252.1, 249.5625));
  border-bottom-color: #fce4ec;
}
html.sakura-mode .project-table .projects-header::before,
html.sakura-mode .projects-header .projects-header::before,
html.sakura-mode .search-section .projects-header::before,
html.sakura-mode .table-container .projects-header::before {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .project-table .projects-header h1,
html.sakura-mode .projects-header .projects-header h1,
html.sakura-mode .search-section .projects-header h1,
html.sakura-mode .table-container .projects-header h1 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .project-table .projects-header .subtitle,
html.sakura-mode .projects-header .projects-header .subtitle,
html.sakura-mode .search-section .projects-header .subtitle,
html.sakura-mode .table-container .projects-header .subtitle {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .project-table .search-section,
html.sakura-mode .projects-header .search-section,
html.sakura-mode .search-section .search-section,
html.sakura-mode .table-container .search-section {
  background: #ffffff;
  border-bottom-color: #fce4ec;
}
html.sakura-mode .project-table .search-section #project-search,
html.sakura-mode .projects-header .search-section #project-search,
html.sakura-mode .search-section .search-section #project-search,
html.sakura-mode .table-container .search-section #project-search {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
}
html.sakura-mode .project-table .search-section #project-search:focus,
html.sakura-mode .projects-header .search-section #project-search:focus,
html.sakura-mode .search-section .search-section #project-search:focus,
html.sakura-mode .table-container .search-section #project-search:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode .project-table .search-section #project-search:disabled,
html.sakura-mode .projects-header .search-section #project-search:disabled,
html.sakura-mode .search-section .search-section #project-search:disabled,
html.sakura-mode .table-container .search-section #project-search:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode .project-table .search-section #project-search:focus,
html.sakura-mode .projects-header .search-section #project-search:focus,
html.sakura-mode .search-section .search-section #project-search:focus,
html.sakura-mode .table-container .search-section #project-search:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode .project-table .search-section #project-search:hover,
html.sakura-mode .projects-header .search-section #project-search:hover,
html.sakura-mode .search-section .search-section #project-search:hover,
html.sakura-mode .table-container .search-section #project-search:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .project-table .search-section .search-icon,
html.sakura-mode .projects-header .search-section .search-icon,
html.sakura-mode .search-section .search-section .search-icon,
html.sakura-mode .table-container .search-section .search-icon {
  color: #ff6b9d;
}
html.sakura-mode .project-table .table-container,
html.sakura-mode .projects-header .table-container,
html.sakura-mode .search-section .table-container,
html.sakura-mode .table-container .table-container {
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .project-table .table-container table thead,
html.sakura-mode .projects-header .table-container table thead,
html.sakura-mode .search-section .table-container table thead,
html.sakura-mode .table-container .table-container table thead {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.15), rgba(248, 187, 217, 0.1));
}
html.sakura-mode .project-table .table-container table thead th,
html.sakura-mode .projects-header .table-container table thead th,
html.sakura-mode .search-section .table-container table thead th,
html.sakura-mode .table-container .table-container table thead th {
  color: #4a1e3a;
}
html.sakura-mode .project-table .table-container table thead th:hover,
html.sakura-mode .projects-header .table-container table thead th:hover,
html.sakura-mode .search-section .table-container table thead th:hover,
html.sakura-mode .table-container .table-container table thead th:hover {
  background: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .project-table .table-container table thead th:hover::after,
html.sakura-mode .projects-header .table-container table thead th:hover::after,
html.sakura-mode .search-section .table-container table thead th:hover::after,
html.sakura-mode .table-container .table-container table thead th:hover::after {
  color: #ff6b9d;
}
html.sakura-mode .project-table .table-container table tbody tr,
html.sakura-mode .projects-header .table-container table tbody tr,
html.sakura-mode .search-section .table-container table tbody tr,
html.sakura-mode .table-container .table-container table tbody tr {
  border-bottom-color: rgba(255, 107, 157, 0.15);
}
html.sakura-mode .project-table .table-container table tbody tr:hover,
html.sakura-mode .projects-header .table-container table tbody tr:hover,
html.sakura-mode .search-section .table-container table tbody tr:hover,
html.sakura-mode .table-container .table-container table tbody tr:hover {
  background: rgba(255, 107, 157, 0.05);
}
html.sakura-mode .project-table .table-container table tbody td,
html.sakura-mode .projects-header .table-container table tbody td,
html.sakura-mode .search-section .table-container table tbody td,
html.sakura-mode .table-container .table-container table tbody td {
  color: rgb(110.2884615385, 44.7115384615, 86.4423076923);
}
html.sakura-mode .project-table .table-container table tbody td:first-child,
html.sakura-mode .projects-header .table-container table tbody td:first-child,
html.sakura-mode .search-section .table-container table tbody td:first-child,
html.sakura-mode .table-container .table-container table tbody td:first-child {
  color: #4a1e3a;
}
html.sakura-mode .project-table .table-container table tbody td a,
html.sakura-mode .projects-header .table-container table tbody td a,
html.sakura-mode .search-section .table-container table tbody td a,
html.sakura-mode .table-container .table-container table tbody td a {
  color: #ff6b9d;
}
html.sakura-mode .project-table .table-container table tbody td a:hover,
html.sakura-mode .projects-header .table-container table tbody td a:hover,
html.sakura-mode .search-section .table-container table tbody td a:hover,
html.sakura-mode .table-container .table-container table tbody td a:hover {
  color: rgb(255, 56, 123.2297297297);
  background: rgba(255, 107, 157, 0.1);
}
html.sakura-mode .project-table .empty-state,
html.sakura-mode .projects-header .empty-state,
html.sakura-mode .search-section .empty-state,
html.sakura-mode .table-container .empty-state {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .project-table .empty-state .empty-icon,
html.sakura-mode .projects-header .empty-state .empty-icon,
html.sakura-mode .search-section .empty-state .empty-icon,
html.sakura-mode .table-container .empty-state .empty-icon {
  color: #ff6b9d;
}
html.sakura-mode .project-table .empty-state h3,
html.sakura-mode .projects-header .empty-state h3,
html.sakura-mode .search-section .empty-state h3,
html.sakura-mode .table-container .empty-state h3 {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .tasks-header {
  background: linear-gradient(135deg, #ffffff, rgb(254.6375, 252.1, 249.5625));
  border-color: rgba(255, 107, 157, 0.2);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .tasks-app .tasks-header::before {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .tasks-app .tasks-header .header-content .title-section h1 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .tasks-app .tasks-header .header-content .title-section .subtitle {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card {
  background: rgba(255, 107, 157, 0.08);
  border-color: rgba(255, 107, 157, 0.2);
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
  padding: 1.5rem;
  border: 1px solid rgba(255, 107, 157, 0.1);
  position: relative;
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  border-radius: 1rem 1rem 0 0;
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card .stat-content .stat-number {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card .stat-content .stat-label {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card .stat-icon.success {
  background: linear-gradient(135deg, #81c784, rgb(164.3076923077, 214.6923076923, 166.467032967));
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card .stat-icon.warning {
  background: linear-gradient(135deg, #ffb74d, rgb(255, 203.6292134831, 128));
}
html.sakura-mode .tasks-app .tasks-header .header-content .stats-grid .stat-card .stat-icon.info {
  background: linear-gradient(135deg, #64b5f6, rgb(148.2012195122, 204.012195122, 248.7987804878));
}
html.sakura-mode .tasks-app .tasks-controls {
  background: #ffffff;
  border-bottom-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .tasks-app .tasks-controls .search-container #task-search {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
}
html.sakura-mode .tasks-app .tasks-controls .search-container #task-search:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode .tasks-app .tasks-controls .search-container #task-search:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode .tasks-app .tasks-controls .search-container #task-search:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode .tasks-app .tasks-controls .search-container #task-search:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .tasks-app .tasks-controls .search-icon {
  color: rgba(255, 107, 157, 0.6);
}
html.sakura-mode .tasks-app .tasks-controls .filter-select,
html.sakura-mode .tasks-app .tasks-controls .sort-select {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
}
html.sakura-mode .tasks-app .tasks-controls .filter-select:focus,
html.sakura-mode .tasks-app .tasks-controls .sort-select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode .tasks-app .tasks-controls .filter-select:disabled,
html.sakura-mode .tasks-app .tasks-controls .sort-select:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode .tasks-app .tasks-controls .filter-select:focus,
html.sakura-mode .tasks-app .tasks-controls .sort-select:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode .tasks-app .tasks-controls .filter-select:hover,
html.sakura-mode .tasks-app .tasks-controls .sort-select:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .tasks-app .tasks-controls .btn-icon {
  border-color: rgba(255, 107, 157, 0.3);
  background: #ffffff;
  color: #ff6b9d;
}
html.sakura-mode .tasks-app .tasks-controls .btn-icon:hover {
  background: rgba(255, 107, 157, 0.1);
  border-color: #ff6b9d;
}
html.sakura-mode .tasks-app .tasks-container {
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .tasks-app .tasks-container .empty-state {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .tasks-app .tasks-container .empty-state .empty-icon {
  color: #ff6b9d;
}
html.sakura-mode .tasks-app .tasks-container .empty-state h3 {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
  padding: 1.5rem;
  border: 1px solid rgba(255, 107, 157, 0.1);
  position: relative;
  border-color: rgba(255, 107, 157, 0.15);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  border-radius: 1rem 1rem 0 0;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item.overdue {
  border-color: rgba(240, 98, 146, 0.4);
  background: rgba(240, 98, 146, 0.05);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item.overdue::before {
  background: linear-gradient(135deg, #f06292, rgb(235.5523255814, 51.4476744186, 113.6802325581));
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-header .task-content .task-title {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-header .task-content .task-description {
  color: rgb(146.5769230769, 59.4230769231, 114.8846153846);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-header .task-content .task-meta .task-info {
  color: rgb(196.7307692308, 111.2692307692, 165.6538461538);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-header .task-content .task-progress .progress-bar {
  background: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-header .task-content .task-progress .progress-bar .progress-fill {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks {
  background: rgba(255, 107, 157, 0.05);
  border-top-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtasks-header h5 {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtasks-list .subtask-item {
  background: #ffffff;
  border-color: rgba(255, 107, 157, 0.15);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtasks-list .subtask-item .subtask-content .subtask-title {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtasks-list .subtask-item .subtask-content .subtask-description {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtask-form input[type=text] {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtask-form input[type=text]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtask-form input[type=text]:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtask-form input[type=text]:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode .tasks-app .tasks-container .tasks-list .task-item .task-subtasks .subtask-form input[type=text]:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .tasks-app .modal .modal-content {
  background: #ffffff;
  box-shadow: 0 15px 35px rgba(255, 107, 157, 0.3);
}
html.sakura-mode .tasks-app .modal .modal-content .modal-header {
  border-bottom-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .tasks-app .modal .modal-content .modal-header h3 {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .modal .modal-content .modal-header .modal-close {
  background: rgba(255, 107, 157, 0.1);
  color: #ff6b9d;
}
html.sakura-mode .tasks-app .modal .modal-content .modal-header .modal-close:hover {
  background: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .tasks-app .modal .modal-content .task-form .form-group label {
  color: #4a1e3a;
}
html.sakura-mode .tasks-app .modal .modal-content .task-form .modal-actions {
  border-top-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .tasks-app .badge.badge-category {
  background: rgba(100, 181, 246, 0.15);
  color: rgb(13.3902439024, 133.9024390244, 230.6097560976);
  border-color: rgba(100, 181, 246, 0.4);
}
html.sakura-mode .tasks-app .badge.badge-priority.priority-low {
  background: rgba(129, 199, 132, 0.15);
  color: rgb(69.5384615385, 156.4615384615, 73.2637362637);
  border-color: rgba(129, 199, 132, 0.4);
}
html.sakura-mode .tasks-app .badge.badge-priority.priority-medium {
  background: rgba(255, 183, 77, 0.15);
  color: rgb(230, 136.9662921348, 0);
  border-color: rgba(255, 183, 77, 0.4);
}
html.sakura-mode .tasks-app .badge.badge-priority.priority-high {
  background: rgba(240, 98, 146, 0.15);
  color: rgb(215.4186046512, 20.5813953488, 86.4418604651);
  border-color: rgba(240, 98, 146, 0.4);
}
html.sakura-mode .tasks-app .badge.badge-overdue {
  background: rgba(240, 98, 146, 0.15);
  color: rgb(215.4186046512, 20.5813953488, 86.4418604651);
  border-color: rgba(240, 98, 146, 0.4);
  animation: sakuraPulse 2s infinite;
}
html.sakura-mode .components h1 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .components .component {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
  padding: 1.5rem;
  border: 1px solid rgba(255, 107, 157, 0.1);
  position: relative;
}
html.sakura-mode .components .component::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  border-radius: 1rem 1rem 0 0;
}
html.sakura-mode .components .component:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .components .component h2 {
  color: #4a1e3a;
}
html.sakura-mode .components .component h2::before {
  content: "🌸";
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}
html.sakura-mode .components .component .demo-controls {
  background: rgba(255, 107, 157, 0.08);
  border-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .components .component .demo-controls .control-group label {
  color: #4a1e3a;
}
html.sakura-mode .components .component .demo-controls .control-group input, html.sakura-mode .components .component .demo-controls .control-group select, html.sakura-mode .components .component .demo-controls .control-group textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}
html.sakura-mode .components .component .demo-controls .control-group input:focus, html.sakura-mode .components .component .demo-controls .control-group select:focus, html.sakura-mode .components .component .demo-controls .control-group textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode .components .component .demo-controls .control-group input:disabled, html.sakura-mode .components .component .demo-controls .control-group select:disabled, html.sakura-mode .components .component .demo-controls .control-group textarea:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode .components .component .demo-controls .control-group input:focus, html.sakura-mode .components .component .demo-controls .control-group select:focus, html.sakura-mode .components .component .demo-controls .control-group textarea:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode .components .component .demo-controls .control-group input:hover, html.sakura-mode .components .component .demo-controls .control-group select:hover, html.sakura-mode .components .component .demo-controls .control-group textarea:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .components .component .demo-controls .control-group span {
  color: #ff6b9d;
}
html.sakura-mode .components .component .demo-table {
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
}
html.sakura-mode .components .component .demo-table th {
  background: #ff6b9d !important;
  color: #ffffff !important;
}
html.sakura-mode .components .component .demo-table td {
  color: #4a1e3a;
}
html.sakura-mode .components .component .demo-table tbody tr:nth-child(even) {
  background: rgba(255, 107, 157, 0.05);
}
html.sakura-mode .components .component .demo-table tbody tr:hover {
  background: rgba(255, 107, 157, 0.1);
}
html.sakura-mode .components .component .demo-table tbody tr.selected {
  background: rgba(248, 187, 217, 0.15) !important;
  border-left-color: #f8bbd9;
}
html.sakura-mode .components .component dialog {
  background: #ffffff;
  box-shadow: 0 15px 35px rgba(255, 107, 157, 0.3);
}
html.sakura-mode .components .component dialog h3 {
  color: #4a1e3a;
}
html.sakura-mode .components .component dialog p {
  color: #4a1e3a;
}
html.sakura-mode .components .component .progress-container .progress-label {
  color: #4a1e3a;
}
html.sakura-mode .components .component .color-demo {
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .components .component .color-demo:hover {
  box-shadow: 0 15px 35px rgba(255, 107, 157, 0.3);
}
html.sakura-mode .components .component .color-demo.bg-primary {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .demo-item {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
  padding: 1.5rem;
  border: 1px solid rgba(255, 107, 157, 0.1);
  position: relative;
}
html.sakura-mode .demo-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  border-radius: 1rem 1rem 0 0;
}
html.sakura-mode .demo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .demo-item h2 {
  color: #ff6b9d;
}
html.sakura-mode canvas {
  border-color: rgba(255, 107, 157, 0.3);
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
}
html.sakura-mode canvas:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .demo-hint {
  color: rgb(146.5769230769, 59.4230769231, 114.8846153846);
}
html.sakura-mode .select-input {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  border: 2px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #ffffff;
  transition: all 200ms ease;
  box-sizing: border-box;
  border: 2px solid rgba(255, 107, 157, 0.3);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  min-width: 120px;
}
html.sakura-mode .select-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
html.sakura-mode .select-input:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.6;
}
html.sakura-mode .select-input:focus {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 4px rgba(255, 107, 157, 0.2);
  background: #ffffff;
}
html.sakura-mode .select-input:hover {
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .range-input::-webkit-slider-thumb {
  background: #ff6b9d;
  border-color: #ffffff;
}
html.sakura-mode .range-input::-webkit-slider-track {
  background: rgba(255, 107, 157, 0.3);
}
html.sakura-mode .range-input::-moz-range-thumb {
  background: #ff6b9d;
  border-color: #ffffff;
}
html.sakura-mode .range-input::-moz-range-track {
  background: rgba(255, 107, 157, 0.3);
}
html.sakura-mode .demo-controls {
  background: rgba(252, 228, 236, 0.5);
  border-color: rgba(255, 107, 157, 0.2);
}
html.sakura-mode .hero {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
}
html.sakura-mode .hero::before {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}
html.sakura-mode .hero h1 #rotating-text {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .hero h1 #rotating-text.text-changing {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(248, 187, 217, 0.6), 0 0 30px rgba(255, 107, 157, 0.4);
}
html.sakura-mode .hero .btn {
  background: #ffffff;
  color: #ff6b9d;
}
html.sakura-mode .hero .btn:hover {
  background: white;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .features {
  background: #ffffff;
}
html.sakura-mode .features .feature {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(255, 107, 157, 0.2);
  padding: 1.5rem;
  border: 1px solid rgba(255, 107, 157, 0.1);
  position: relative;
}
html.sakura-mode .features .feature::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  border-radius: 1rem 1rem 0 0;
}
html.sakura-mode .features .feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .features .feature i {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .features .feature h3 {
  color: #4a1e3a;
}
html.sakura-mode .features .feature p {
  color: rgb(146.5769230769, 59.4230769231, 114.8846153846);
}
html.sakura-mode .features .feature:hover {
  box-shadow: 0 15px 35px rgba(255, 107, 157, 0.3);
  border-color: rgba(255, 107, 157, 0.4);
}
html.sakura-mode .features .feature:hover i {
  filter: drop-shadow(0 4px 10px rgba(255, 107, 157, 0.4));
}
html.sakura-mode .live-demo {
  background: linear-gradient(135deg, #ffffff 0%, white 100%);
}
html.sakura-mode .live-demo h2 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .live-demo canvas {
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .live-demo canvas:hover {
  box-shadow: 0 15px 35px rgba(255, 107, 157, 0.3);
  border-color: rgba(255, 107, 157, 0.5);
}
html.sakura-mode .datenschutz .privacy-header {
  background: linear-gradient(135deg, #ffffff, rgb(254.6375, 252.1, 249.5625));
  border-bottom-color: #fce4ec;
}
html.sakura-mode .datenschutz .privacy-header::before {
  background: linear-gradient(90deg, #64b5f6, #ff6b9d, #f06292);
}
html.sakura-mode .datenschutz .privacy-header h1 {
  background: linear-gradient(135deg, #ff6b9d, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.sakura-mode .datenschutz .privacy-header .subtitle {
  color: rgb(182.0192307692, 74.9807692308, 143.0961538462);
}
html.sakura-mode .datenschutz .privacy-content {
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode .datenschutz .privacy-section {
  border-bottom-color: #fce4ec;
}
html.sakura-mode .datenschutz .privacy-section:hover {
  background: rgb(254.6375, 252.1, 249.5625);
}
html.sakura-mode .datenschutz .privacy-section:hover::before {
  background: linear-gradient(135deg, #64b5f6, #ff6b9d);
}
html.sakura-mode .datenschutz .privacy-section h2 {
  color: #4a1e3a;
}
html.sakura-mode .datenschutz .privacy-section h2::before {
  background: linear-gradient(135deg, #64b5f6, #ff6b9d);
}
html.sakura-mode .datenschutz .privacy-section p {
  color: rgb(110.2884615385, 44.7115384615, 86.4423076923);
}
html.sakura-mode .datenschutz .privacy-section ul li {
  color: rgb(110.2884615385, 44.7115384615, 86.4423076923);
}
html.sakura-mode .datenschutz .privacy-section ul li::before {
  color: #64b5f6;
}
html.sakura-mode .datenschutz .privacy-section a {
  color: #64b5f6;
}
html.sakura-mode .datenschutz .privacy-section a:hover {
  color: rgb(27.6981707317, 146.4817073171, 241.8018292683);
}
html.sakura-mode .datenschutz .contact-section {
  background: linear-gradient(135deg, white, white);
  border-color: rgba(248, 187, 217, 0.3);
}
html.sakura-mode .status.active {
  background: rgba(129, 199, 132, 0.15);
  color: rgb(69.5384615385, 156.4615384615, 73.2637362637);
  border-color: rgba(129, 199, 132, 0.4);
}
html.sakura-mode .status.inactive {
  background: rgba(232, 197, 221, 0.15);
  color: rgb(203.037037037, 123.962962963, 178.1851851852);
  border-color: rgba(232, 197, 221, 0.4);
}
html.sakura-mode .status.pending {
  background: rgba(255, 183, 77, 0.15);
  color: rgb(230, 136.9662921348, 0);
  border-color: rgba(255, 183, 77, 0.4);
}
html.sakura-mode .custom-tooltip {
  background: rgba(74, 30, 58, 0.9);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(255, 107, 157, 0.25);
}
html.sakura-mode #mode-toggle {
  position: relative;
}
html.sakura-mode #mode-toggle::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff6b9d, #f8bbd9, #ff6b9d);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
html.sakura-mode #mode-toggle:hover::after {
  opacity: 1;
  animation: sakuraGlow 2s ease-in-out infinite;
}

@keyframes sakuraPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
@keyframes sakuraGlow {
  0%, 100% {
    background: linear-gradient(45deg, #ff6b9d, #f8bbd9, #ff6b9d);
  }
  50% {
    background: linear-gradient(45deg, #f8bbd9, #ff6b9d, #f8bbd9);
  }
}
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: linear-gradient(135deg, #e2e8f0 0%, rgb(209.1931818182, 218.6704545455, 231.3068181818) 100%);
  color: #0f172a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body main .datenschutz {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 900px;
  margin: 2rem auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 768px) {
  body main .datenschutz {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
body main .datenschutz .privacy-header {
  background: linear-gradient(135deg, #ffffff 0%, white 100%);
  padding: 3rem 2rem;
  border-radius: 0.75rem 0.75rem 0 0;
  border-bottom: 3px solid white;
  position: relative;
  overflow: hidden;
}
body main .datenschutz .privacy-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}
body main .datenschutz .privacy-header h1 {
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  background: linear-gradient(135deg, #0f172a 0%, rgb(41.8421052632, 64.1578947368, 117.1578947368) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body main .datenschutz .privacy-header .subtitle {
  font-size: 1.1rem;
  color: rgb(55.2631578947, 84.7368421053, 154.7368421053);
  margin: 0;
  font-weight: 400;
}
body main .datenschutz .privacy-content {
  background: #ffffff;
  border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
body main .datenschutz .privacy-section {
  padding: 2rem 2rem;
  border-bottom: 1px solid white;
  transition: all 0.3s ease;
  position: relative;
}
body main .datenschutz .privacy-section:last-child {
  border-bottom: none;
}
body main .datenschutz .privacy-section:hover {
  background: white;
  transform: translateX(8px);
}
body main .datenschutz .privacy-section:hover::before {
  opacity: 1;
  width: 4px;
}
body main .datenschutz .privacy-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  transition: all 0.3s ease;
  opacity: 0;
}
body main .datenschutz .privacy-section h2 {
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body main .datenschutz .privacy-section h2::before {
  content: "";
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  flex-shrink: 0;
}
body main .datenschutz .privacy-section p {
  line-height: 1.7;
  margin: 0 0 1rem 0;
  color: rgb(28.4210526316, 43.5789473684, 79.5789473684);
  font-size: 0.95rem;
}
body main .datenschutz .privacy-section p:last-child {
  margin-bottom: 0;
}
body main .datenschutz .privacy-section ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}
body main .datenschutz .privacy-section ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: rgb(28.4210526316, 43.5789473684, 79.5789473684);
}
body main .datenschutz .privacy-section ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: bold;
  font-size: 1.1rem;
}
body main .datenschutz .privacy-section a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
body main .datenschutz .privacy-section a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
body main .datenschutz .contact-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
}
body main .datenschutz .contact-section h2::before {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
}
body main .datenschutz .privacy-section {
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.6s ease-out forwards;
}
body main .datenschutz .privacy-section:nth-child(1) {
  animation-delay: 0.1s;
}
body main .datenschutz .privacy-section:nth-child(2) {
  animation-delay: 0.2s;
}
body main .datenschutz .privacy-section:nth-child(3) {
  animation-delay: 0.3s;
}
body main .datenschutz .privacy-section:nth-child(4) {
  animation-delay: 0.4s;
}
body main .datenschutz .privacy-section:nth-child(5) {
  animation-delay: 0.5s;
}
body main .datenschutz .privacy-section:nth-child(6) {
  animation-delay: 0.6s;
}
body main .datenschutz .privacy-section:nth-child(7) {
  animation-delay: 0.7s;
}
body main .datenschutz .privacy-section:nth-child(8) {
  animation-delay: 0.8s;
}
body main .datenschutz .privacy-section:nth-child(9) {
  animation-delay: 0.9s;
}
body main .datenschutz .privacy-section:nth-child(10) {
  animation-delay: 1s;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html.dark-mode body {
  background: linear-gradient(135deg, #0f172a 0%, rgb(21.7105263158, 33.2894736842, 60.7894736842) 100%);
  color: #e2e8f0;
}
html.dark-mode body main .datenschutz .privacy-header {
  background: linear-gradient(135deg, rgb(25.7368421053, 39.4631578947, 72.0631578947) 0%, rgb(31.1052631579, 47.6947368421, 87.0947368421) 100%);
  border-bottom-color: rgb(35.1315789474, 53.8684210526, 98.3684210526);
}
html.dark-mode body main .datenschutz .privacy-header h1 {
  background: linear-gradient(135deg, #e2e8f0 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.dark-mode body main .datenschutz .privacy-header .subtitle {
  color: rgb(158.7727272727, 178.6818181818, 205.2272727273);
}
html.dark-mode body main .datenschutz .privacy-content {
  background: rgb(25.7368421053, 39.4631578947, 72.0631578947);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
html.dark-mode body main .datenschutz .privacy-section {
  border-bottom-color: rgb(35.1315789474, 53.8684210526, 98.3684210526);
}
html.dark-mode body main .datenschutz .privacy-section:hover {
  background: rgb(28.4210526316, 43.5789473684, 79.5789473684);
}
html.dark-mode body main .datenschutz .privacy-section h2 {
  color: #e2e8f0;
}
html.dark-mode body main .datenschutz .privacy-section p {
  color: rgb(175.5795454545, 192.0113636364, 213.9204545455);
}
html.dark-mode body main .datenschutz .privacy-section ul li {
  color: rgb(175.5795454545, 192.0113636364, 213.9204545455);
}
html.dark-mode body main .datenschutz .privacy-section ul li::before {
  color: #60a5fa;
}
html.dark-mode body main .datenschutz .privacy-section a {
  color: #60a5fa;
}
html.dark-mode body main .datenschutz .privacy-section a:hover {
  color: #93c5fd;
}
html.dark-mode body main .datenschutz .contact-section {
  background: linear-gradient(135deg, rgb(31.1052631579, 47.6947368421, 87.0947368421) 0%, rgb(35.1315789474, 53.8684210526, 98.3684210526) 100%);
  border-color: rgb(41.8421052632, 64.1578947368, 117.1578947368);
}/*# sourceMappingURL=terms.css.map */