@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --font-ui: "IBM Plex Sans", "Manrope", "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans", "Manrope", "Segoe UI", sans-serif;
  --bg: #f4f6fa;
  --bg-elevated: rgba(255, 255, 255, 0.84);
  --bg-solid: #ffffff;
  --surface: #ffffff;
  --surface-soft: #eef2f8;
  --text: #101828;
  --text-muted: #5f6f85;
  --border: #d8deea;
  --border-strong: #bcc6d8;
  --shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
  --primary: #2962ff;
  --primary-hover: #1f53ea;
  --danger: #d14343;
  --danger-hover: #b63b3b;
  --success: #1f8f66;
  --success-hover: #1a7856;
  --warning: #b9751b;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;
  --max-width: 1180px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f16;
  --bg-elevated: rgba(21, 27, 39, 0.8);
  --bg-solid: #111827;
  --surface: #131c2d;
  --surface-soft: #0f1624;
  --text: #e6eaf2;
  --text-muted: #97a3ba;
  --border: #263248;
  --border-strong: #34425c;
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  --primary: #5d8dff;
  --primary-hover: #7aa2ff;
  --danger: #f07171;
  --danger-hover: #f58b8b;
  --success: #43b288;
  --success-hover: #58c69b;
  --warning: #e5a14a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 34%),
    radial-gradient(circle at 90% 90%, color-mix(in srgb, #7b8794 14%, transparent), transparent 40%),
    var(--bg);
  min-height: 100vh;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .6rem; font-family: var(--font-display); color: var(--text); font-weight: 600; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

.container {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  padding-inline: 1rem;
}

.bg-light { background: transparent !important; }
.bg-white { background: var(--bg-solid) !important; }

.card, .stat-card, .error-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.card-body { padding: 1rem 1.15rem; }

.shadow-sm { box-shadow: var(--shadow) !important; }
.border { border: 1px solid var(--border) !important; }
.rounded { border-radius: var(--radius-sm) !important; }

.form-label {
  display: inline-block;
  margin-bottom: .4rem;
  font-size: .88rem;
  color: var(--text-muted);
}
.form-control,
.form-select,
textarea.form-control {
  width: 100%;
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  padding: .66rem .74rem;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.form-control::placeholder { color: color-mix(in srgb, var(--text-muted) 85%, transparent); }
.form-control-sm, .form-select-sm { padding: .45rem .56rem; font-size: .88rem; }
.form-range {
  width: 100%;
  accent-color: var(--primary);
}

form > .d-flex.gap-2,
form .col-12.d-flex.gap-2,
form .col-12.col-sm-auto.d-flex.gap-2 {
  margin-top: .4rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: 14px;
  border: 1px solid transparent;
  padding: .56rem .92rem;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn.disabled { opacity: .6; pointer-events: none; }
.btn-sm { font-size: .8rem; padding: .4rem .72rem; }

.btn-primary {
  background-color: var(--primary);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary));
  border-color: color-mix(in srgb, var(--primary) 82%, #000);
  color: #fff;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--primary) 28%, transparent);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-hover) 90%, #fff), var(--primary-hover));
  border-color: var(--primary-hover);
  color: #fff;
}
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); color: #fff; }
.btn-outline-primary { background: transparent; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.btn-outline-primary:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-hover); }
.btn-outline-secondary { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.btn-outline-secondary:hover { background: color-mix(in srgb, var(--surface-soft) 55%, transparent); color: var(--text); }
.btn-outline-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.btn-outline-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger-hover); }
.btn-light { background: color-mix(in srgb, var(--surface-soft) 70%, transparent); border-color: var(--border); color: var(--text); }

.alert {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .72rem .82rem;
  font-size: .93rem;
}
.alert-secondary {
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  border-color: var(--border);
  color: var(--text-muted);
}
.alert-success {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  color: color-mix(in srgb, var(--success-hover) 85%, var(--text));
}
.alert-danger {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  color: color-mix(in srgb, var(--danger-hover) 85%, var(--text));
}
.alert-info {
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  color: color-mix(in srgb, var(--primary-hover) 86%, var(--text));
}

.table-responsive { width: 100%; overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: .62rem .54rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table th { font-size: .83rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.table tr:last-child td { border-bottom: none; }
.align-middle td, .align-middle th { vertical-align: middle; }

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: .42rem;
}
.page-item { display: flex; }
.page-link {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  padding: .48rem .76rem;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
}
.page-link:hover { border-color: var(--primary); color: var(--primary); }
.page-item.disabled .page-link { opacity: .52; pointer-events: none; }

.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); margin: 0; }
.h1 { font-size: clamp(1.9rem, 2.3vw, 2.6rem); }
.h2 { font-size: clamp(1.65rem, 2vw, 2.15rem); }
.h3 { font-size: clamp(1.45rem, 1.6vw, 1.82rem); }
.h4 { font-size: 1.28rem; }
.h5 { font-size: 1.08rem; }
.h6 { font-size: .97rem; }

.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-center { text-align: center !important; }
.text-dark { color: var(--text) !important; }
.link-primary { color: var(--primary) !important; }
.small { font-size: .84rem; }
.fw-bold { font-weight: 800 !important; }
.fw-semibold { font-weight: 700 !important; }

.text-decoration-none { text-decoration: none !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.vstack { display: flex; flex-direction: column; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.h-100 { height: 100% !important; }
.w-50 { width: 50% !important; }
.mt-auto { margin-top: auto !important; }
.pt-1 { padding-top: .25rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.position-relative { position: relative !important; }

.gap-2 { gap: .6rem !important; }
.gap-3 { gap: .9rem !important; }

.p-2 { padding: .55rem !important; }
.p-3 { padding: .95rem !important; }
.p-4 { padding: 1.2rem !important; }
.p-5 { padding: 1.65rem !important; }
.px-4 { padding-inline: 1.2rem !important; }
.py-3 { padding-top: .95rem !important; padding-bottom: .95rem !important; }
.py-4 { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
.py-5 { padding-top: 1.65rem !important; padding-bottom: 1.65rem !important; }

.mt-2 { margin-top: .6rem !important; }
.mt-3 { margin-top: .9rem !important; }
.mt-4 { margin-top: 1.2rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .3rem !important; }
.mb-2 { margin-bottom: .6rem !important; }
.mb-3 { margin-bottom: .9rem !important; }
.mb-4 { margin-bottom: 1.2rem !important; }
.mb-5 { margin-bottom: 1.75rem !important; }
.special { margin: 0}
.sp1 { margin-top: .6rem}
.sp2 { margin-top: 1.2rem}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter, .9rem) * -0.5);
}
.row > * {
  width: 100%;
  padding-inline: calc(var(--gutter, .9rem) * 0.5);
}
.g-2 { --gutter: .6rem; }
.g-3 { --gutter: .95rem; }

.col-12 { width: 100%; }
.col { flex: 1 0 0%; width: 100%; }
.col-sm-auto { width: auto; }

@media (min-width: 768px) {
  .py-md-4 { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
  .py-md-5 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .p-md-4 { padding: 1.2rem !important; }
  .p-md-5 { padding: 1.75rem !important; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; }
  .col-md-6 { width: 50%; }
  .col-md-8 { width: 66.6667%; }
  .col-md-auto { width: auto; }
}
@media (min-width: 576px) {
  .col-sm-6 { width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333%; }
  .col-lg-5 { width: 41.6667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333%; }
  .col-lg-8 { width: 66.6667%; }
}
@media (min-width: 1400px) {
  .col-xxl-2 { width: 16.6667%; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.site-brand {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .01em;
  text-decoration: none;
}
.navbar-brand { display: inline-block; }
.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
}

.mobile-menu-host {
  position: relative;
}
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 1.05rem;
}
.mobile-menu-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .52rem;
}
.text-bg-success {
  background: color-mix(in srgb, var(--success) 20%, transparent) !important;
  color: color-mix(in srgb, var(--success-hover) 78%, var(--text)) !important;
}
.text-bg-warning {
  background: color-mix(in srgb, var(--warning) 22%, transparent) !important;
  color: color-mix(in srgb, var(--warning) 70%, var(--text)) !important;
}

.theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.theme-toggle:hover { border-color: var(--primary); }

.books-slider {
  position: relative;
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border: 1px solid var(--border);
  padding: .9rem;
}
.books-slider-inner { min-height: 270px; }
.books-slide { display: none; animation: fadeSlide .35s ease; }
.books-slide.active { display: block; }
.books-slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-solid) 82%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.books-slider-btn:hover { color: var(--primary); border-color: var(--primary); }
.books-slider-controls {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .8rem;
}

@media (max-width: 699.98px) {
  body {
    font-size: 14px;
  }
  .h1 { font-size: 1.72rem; }
  .h2 { font-size: 1.48rem; }
  .h3 { font-size: 1.26rem; }
  .h4 { font-size: 1.1rem; }
  .h5 { font-size: 1rem; }
  .h6 { font-size: .92rem; }
  .btn {
    font-size: .82rem;
    padding: .46rem .72rem;
  }
  .btn-sm {
    font-size: .75rem;
    padding: .34rem .62rem;
  }
  .small {
    font-size: .78rem;
  }
  .mobile-menu-toggle {
    display: inline-flex;
  }
  [data-mobile-menu] {
    display: none !important;
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    z-index: 80;
    min-width: 210px;
    max-width: min(84vw, 320px);
    padding: .6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch !important;
    gap: .4rem !important;
  }
  [data-mobile-menu].is-open {
    display: flex !important;
  }
  [data-mobile-menu] .btn {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (min-width: 700px) {
  .mobile-menu-toggle {
    display: none !important;
  }
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}