/* Skin 1 – Hypermodern (nadstavba) */

.wsma {
  position: relative;
  isolation: isolate;
  padding: 24px;
  border-radius: 22px;
  font-family: "Space Grotesk", "Sora", "Trebuchet MS", sans-serif;
  color: #eef2f7;
  --wsma-ink: #eef2f7;
  --wsma-muted: #a9b4c6;
  --wsma-line: rgba(255,255,255,0.12);
  --wsma-accent: #b59a5a;
  --wsma-accent-2: #6bd6ff;
  background: linear-gradient(160deg, rgba(18,28,42,0.88) 0%, rgba(23,35,52,0.88) 55%, rgba(26,39,58,0.88) 100%);
  box-shadow: 0 24px 60px rgba(6,12,20,0.35);
}

.wsma::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(107,214,255,0.18), transparent 60%),
    radial-gradient(900px 320px at 100% 10%, rgba(181,154,90,0.22), transparent 60%),
    radial-gradient(600px 300px at 40% 100%, rgba(255,255,255,0.06), transparent 70%);
  border-radius: 22px;
  z-index: -1;
}

.wsma::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0))
    , repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px);
  opacity: 0.4;
  z-index: -1;
}

/* Headlines */
.wsma h2,
.wsma h3 {
  color: #f4f7fb;
  letter-spacing: 0.2px;
  position: relative;
}

.wsma h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  margin-bottom: 12px;
  padding-left: 14px;
}
.wsma h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 70%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #b59a5a 0%, #d7c08a 100%);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(181,154,90,0.25);
}
.wsma h2::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: -6px;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(181,154,90,0.5), rgba(215,192,138,0.5));
  border-radius: 2px;
}

.wsma h3 {
  font-size: clamp(18px, 2.2vw, 24px);
  margin-top: 22px;
  padding-left: 10px;
}
.wsma h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 60%;
  transform: translateY(-50%);
  background: rgba(181,154,90,0.85);
  border-radius: 4px;
}

.wsma p { color: #dbe3ee; }
.wsma a { color: #c8b07a; }

/* Glass panels */
.wsma .wsma-document,
.wsma .wsma-card,
.wsma .wsma-panel,
.wsma .wsma-progress,
.wsma .wsma-lesson-content,
.wsma .wsma-lessons-list {
  background: rgba(10,16,26,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(4,8,14,0.35);
  backdrop-filter: blur(6px);
}

/* Home page: remove duplicate frame, keep only outer container */
.wsma-home .wsma-document {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.wsma-home .wsma-document::after { display: none; }

/* Home page hero feel */
.wsma-home h2:first-of-type {
  font-size: clamp(28px, 4vw, 44px);
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.wsma-home h2:first-of-type::after { width: 160px; }
.wsma-home p:first-of-type {
  font-size: 16px;
  color: #f0f4fb;
  opacity: 0.9;
}

.wsma .wsma-document { border-radius: 16px; }

/* Cards */
.wsma .wsma-card {
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wsma .wsma-card:hover {
  transform: translateY(-2px);
  border-color: rgba(181,154,90,0.45);
  box-shadow: 0 18px 40px rgba(6,12,20,0.45);
}

/* Inputs */
.wsma form input[type="text"],
.wsma form input[type="email"],
.wsma form input[type="number"],
.wsma form input[type="date"],
.wsma form select,
.wsma form textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  color: #eef2f7;
  border-radius: 12px;
}
.wsma form input:focus,
.wsma form select:focus,
.wsma form textarea:focus {
  border-color: rgba(107,214,255,0.55);
  box-shadow: 0 0 0 3px rgba(107,214,255,0.12);
}

.wsma form label { color: #f0f4fb; }

/* Buttons - unified */
.wsma .button,
.wsma .button.button-primary,
.wsma button.button,
.wsma input[type="submit"] {
  background: linear-gradient(135deg, #b59a5a 0%, #d7c08a 100%);
  border: 1px solid rgba(255,255,255,0.12);
  color: #1b1f29;
  font-weight: 700;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 8px 18px rgba(181,154,90,0.3);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.wsma .button:hover,
.wsma .button.button-primary:hover,
.wsma button.button:hover,
.wsma input[type="submit"]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(181,154,90,0.38), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* Secondary button style */
.wsma .button.button-secondary,
.wsma .wsma-pagination a {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #dbe4f1;
  box-shadow: none;
}

/* Badges unified */
.wsma .wsma-badge,
.wsma .wsma-badge-success {
  background: rgba(181,154,90,0.18);
  border: 1px solid rgba(181,154,90,0.5);
  color: #f6e8c9;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600;
}

.wsma .notice-success {
  background: rgba(181,154,90,0.18);
  border: 1px solid rgba(181,154,90,0.5);
  color: #f2e7c7;
}
.wsma .notice-error {
  background: rgba(210,80,80,0.18);
  border: 1px solid rgba(210,80,80,0.5);
  color: #ffd8d8;
}

.wsma .wsma-lessons-list ul li a { color: #dbe4f1; }
.wsma .wsma-lessons-list li.is-active a { color: #ffe1a3; }

.wsma .wsma-badge,
.wsma .wsma-pagination a {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
  color: #dbe4f1;
}
.wsma .wsma-pagination a.is-active {
  background: rgba(181,154,90,0.25);
  border-color: rgba(181,154,90,0.55);
  color: #ffe1a3;
}

.wsma .wsma-progress__bar {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.wsma .wsma-progress__bar span {
  background: linear-gradient(90deg, rgba(107,214,255,0.4), rgba(181,154,90,0.55));
}

.wsma .wsma-scoring .wsma-card__label { color: var(--wsma-muted); }
.wsma .wsma-scoring .wsma-card__value { color: #ffffff; }

.wsma .wsma-account-badge {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.wsma .wsma-application .wsma-form-grid {
  gap: 14px 18px;
}

.wsma .wsma-document h3 { color: #f6f2e7; }

/* Notifications */
.wsma .wsma-notifications__item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
}
.wsma .wsma-notifications__item--warn {
  border-color: rgba(181,154,90,0.6);
  color: #f6e8c9;
}
.wsma .wsma-note-dismiss__btn {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #f0f4fb;
}
.wsma .wsma-note-dismiss__btn:hover {
  background: rgba(181,154,90,0.25);
  color: #fff;
}
.wsma-menu-badge {
  background: linear-gradient(135deg, #b59a5a 0%, #d7c08a 100%);
  color: #1b1f29;
}
.wsma-menu-account .wsma-menu-badge {
  box-shadow: 0 6px 14px rgba(6,12,20,0.35);
  border: 1px solid rgba(255,255,255,0.35);
}

/* Animations */
@keyframes wsma-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wsma .wsma-card,
.wsma .wsma-document,
.wsma .wsma-lesson-content,
.wsma .wsma-lessons-list,
.wsma .wsma-progress {
  animation: wsma-fade-up .5s ease both;
}

.wsma .wsma-card:nth-child(2) { animation-delay: .06s; }
.wsma .wsma-card:nth-child(3) { animation-delay: .12s; }
.wsma .wsma-card:nth-child(4) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .wsma .wsma-card,
  .wsma .wsma-document,
  .wsma .wsma-lesson-content,
  .wsma .wsma-lessons-list,
  .wsma .wsma-progress {
    animation: none;
  }
}

@media (max-width: 800px) {
  .wsma { padding: 18px; }
  .wsma h2::after { width: 80px; }
}