:root {
  --bg: #0f1318;
  --bg-soft: #151b22;
  --card: #1b222b;
  --line: #3f4a57;
  --text: #cdd3db;
  --muted: #97a0ad;
  --primary: #8f99a6;
  --primary-soft: #29313a;
  --silver: #d1d7de;
  --silver-dark: #7f8a97;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Avenir Next", "Avenir", "Segoe UI", Arial, sans-serif;
  background: #0c1015;
  color: var(--text);
}
body {
  position: relative;
  z-index: 0;
}
.shader-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(28, 35, 44, 0.4) 0%, rgba(12, 16, 21, 0.85) 72%, rgba(8, 11, 15, 0.95) 100%);
}
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, 92vw); margin: 0 auto; }
.header, main, .footer {
  position: relative;
  z-index: 2;
}
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
  background: rgba(12, 16, 21, 0.86);
  border-bottom: 1px solid var(--line);
}
.header .container { display: flex; align-items: center; gap: 18px; padding: 14px 0; }
.logo { font-size: 24px; font-weight: 700; color: var(--silver); }
.signature { color: var(--muted); font-size: 12px; }
.nav { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.nav a { font-size: 14px; color: #c4ccd5; }
.nav a:hover { color: #eceff4; }
.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: .95; }
.btn .btn-label {
  position: relative;
  z-index: 2;
}
.btn .btn-ripple {
  position: absolute;
  border-radius: 999px;
  transform: scale(0);
  animation: btnRippling var(--ripple-duration, 600ms) linear;
  opacity: .32;
  pointer-events: none;
  z-index: 1;
}
@keyframes btnRippling {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.btn.primary {
  background: linear-gradient(180deg, #a6afbc, #8b95a3);
  color: #10161c;
  --ripple-color: #eef2f8;
}
.btn.secondary {
  border-color: #b8c0ca;
  background: rgba(247, 249, 252, 0.95);
  color: #6f7b88;
  --ripple-color: #dfe6ef;
}
.hero { padding: 72px 0 44px; }
.kicker { font-size: 13px; text-transform: uppercase; letter-spacing: .9px; color: #a5afbd; }
h1 { margin: 10px 0 14px; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; color: #d8dde4; }
.lead { color: #bcc5d0; font-size: clamp(17px, 2.1vw, 22px); max-width: 960px; line-height: 1.46; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.section { padding: 24px 0 34px; }
.section h2 { margin: 0 0 14px; font-size: 30px; color: #d5dbe3; }
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: linear-gradient(180deg, rgba(33, 41, 51, 0.92), rgba(26, 33, 42, 0.92));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
.card h3 { margin: 0 0 8px; font-size: 20px; color: #d3dae2; }
.card p { margin: 0 0 8px; color: #bcc5d0; line-height: 1.48; }
.card ul { margin: 8px 0 0 18px; color: #bcc5d0; }
.profile-card {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: start;
  gap: 16px;
}
.profile-photo {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #4f5d6d;
  background: rgba(15, 20, 26, 0.84);
}
.pill {
  background: rgba(43, 53, 64, 0.9);
  border: 1px solid #556273;
  color: #c9d0d8;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  display: inline-block;
  margin-bottom: 8px;
}
.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 36px; color: var(--muted); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.footer h4 { margin: 0 0 8px; color: var(--silver); font-size: 14px; }
.list-links a { display: block; color: #adb8c6; padding: 4px 0; }
.list-links a:hover { color: #e2e7ee; }
.breadcrumb { color: #a2acba; font-size: 13px; margin-top: 14px; }
.page-title { font-size: clamp(30px, 4vw, 46px); margin: 6px 0 14px; color: #d6dce4; }
.small { font-size: 13px; color: var(--muted); }
.form-card { max-width: 920px; }
.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #c7cfda;
  font-size: 14px;
}
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  border: 1px solid #4a5767;
  background: rgba(20, 26, 33, 0.9);
  color: #d0d7df;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
}
.form-grid textarea { resize: vertical; }
.form-feedback { margin-top: 8px; min-height: 18px; }
.books-page .lead { max-width: 1000px; }
.book-list {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.book-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #4b5868;
  background: linear-gradient(180deg, rgba(34, 42, 52, 0.92), rgba(26, 33, 42, 0.92));
}
.book-cover-link { display: block; }
.book-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #556273;
  background: rgba(12, 16, 20, 0.85);
}
.book-title {
  margin: 0 0 8px;
  color: #d3dae2;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.24;
}
.book-desc {
  margin: 0 0 10px;
  color: #c1c9d3;
  line-height: 1.52;
}
.book-meta { margin: 0; color: #b2bcc9; }
.feed-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feed-empty { color: #b6c0cb; font-size: 15px; }
.course-list {
  display: grid;
  gap: 14px;
}
.course-list ol {
  margin: 10px 0 0 18px;
  color: #cad2dd;
}
.wallet-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 11, 15, 0.78);
}
.wallet-modal.is-open { display: flex; }
.wallet-modal-card {
  width: min(560px, 96vw);
  border-radius: 16px;
  border: 1px solid #4e5c6d;
  background: linear-gradient(180deg, rgba(24, 31, 40, 0.98), rgba(18, 24, 32, 0.98));
  padding: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.42);
}
.wallet-modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.wallet-modal-close {
  background: rgba(246, 248, 250, 0.98);
  color: #7a8694;
  border: 1px solid #aeb7c2;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.wallet-status { color: #b8c2cf; margin-top: 10px; min-height: 18px; }
.wallet-user-chip {
  border: 1px solid #5a6879;
  background: rgba(37, 46, 57, 0.78);
  color: #c9d2dc;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
.section-title {
  margin-bottom: 16px;
}
.section-title p {
  color: #acb7c4;
  margin: 0;
}
.podcast-card {
  border-radius: 16px;
  border: 1px solid #4f5c6c;
  background: linear-gradient(180deg, rgba(35, 43, 54, 0.92), rgba(25, 32, 41, 0.92));
  padding: 16px;
}
.podcast-card h3 {
  margin: 0 0 8px;
  color: #d3dae2;
  font-size: 19px;
}
.podcast-card p {
  margin: 0 0 12px;
  color: #bcc5d0;
  font-size: 14px;
  line-height: 1.45;
}
.audio-player {
  width: 100%;
  border-radius: 12px;
  filter: grayscale(0.12) contrast(1.06);
}
.articles-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.articles-controls label {
  font-size: 14px;
  color: #b8c1cd;
}
.articles-controls select {
  margin-left: 8px;
  border: 1px solid #4c5969;
  background: rgba(20, 26, 33, 0.92);
  color: #d2d9e1;
  border-radius: 8px;
  padding: 6px 10px;
}
.article-item {
  border: 1px solid #4e5b6b;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(33, 41, 52, 0.9), rgba(24, 31, 40, 0.9));
  padding: 14px;
}
.article-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #d6dde5;
}
.article-item p {
  margin: 0 0 8px;
  color: #bcc5d0;
  line-height: 1.45;
}
.pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.pagination button {
  border: 1px solid #aeb8c4;
  background: rgba(248, 250, 253, 0.95);
  color: #6f7a87;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  cursor: pointer;
}
.pagination button.active {
  background: #8e98a5;
  border-color: #8e98a5;
  color: #10161c;
}
@media (max-width: 860px) {
  .nav { display: none; }
  .header .container { flex-wrap: wrap; }
  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .form-grid { grid-template-columns: 1fr; }
  .profile-card { grid-template-columns: 1fr; }
  .profile-photo { max-width: 220px; }
}
body.shader-bg-fallback {
  background: #1c2530;
}
body.shader-bg-fallback::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(151, 164, 179, 0.2) 0, transparent 42%),
    radial-gradient(circle at 80% 12%, rgba(138, 151, 167, 0.18) 0, transparent 44%),
    radial-gradient(circle at 18% 88%, rgba(115, 126, 140, 0.2) 0, transparent 50%),
    linear-gradient(160deg, #1f2933 0%, #1a232d 45%, #131b24 100%);
}
body.shader-bg-fallback::before {
  background: radial-gradient(120% 90% at 50% 30%, rgba(61, 73, 87, 0.5) 0%, rgba(28, 36, 46, 0.84) 66%, rgba(13, 18, 24, 0.93) 100%);
}
@media (max-width: 900px) {
  .shader-bg-canvas { display: none; }
  body::before {
    background: radial-gradient(120% 90% at 50% 30%, rgba(62, 75, 90, 0.5) 0%, rgba(28, 36, 46, 0.84) 68%, rgba(13, 18, 24, 0.92) 100%);
  }
  body.shader-bg-fallback::after {
    background:
      radial-gradient(circle at 16% 20%, rgba(160, 171, 184, 0.24) 0, transparent 45%),
      radial-gradient(circle at 83% 14%, rgba(141, 153, 167, 0.22) 0, transparent 45%),
      radial-gradient(circle at 22% 84%, rgba(123, 135, 149, 0.24) 0, transparent 52%),
      linear-gradient(160deg, #28333f 0%, #222c37 45%, #1a232d 100%);
  }
}