/* ЛК — оформление по разделу 3 ТЗ.
   Палитра: #1E3A8A (сайдбар, шапка), #3B82F6 (кнопки, ссылки),
   #60A5FA (акценты), #DBEAFE (фоны), #FFFFFF (контент). */

:root {
  --lk-navy: #1E3A8A;
  --lk-navy-dark: #16296B;
  --lk-blue: #3B82F6;
  --lk-blue-dark: #2F6FD8;
  --lk-sky: #60A5FA;
  --lk-light: #DBEAFE;
  --lk-white: #FFFFFF;
  --lk-page: #F4F7FE;
  --lk-text: #0F172A;
  --lk-muted: #64748B;
  --lk-border: #E2E8F0;
  --lk-radius: 14px;
  --lk-radius-sm: 10px;
  --lk-sidebar: 250px;
  --lk-header: 68px;
  --lk-shadow: 0 10px 30px rgba(30, 58, 138, .08);
}

* { box-sizing: border-box; }

body.lk-body {
  margin: 0;
  font-family: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--lk-page);
  color: var(--lk-text);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--lk-blue); text-decoration: none; }
a:hover { color: var(--lk-blue-dark); text-decoration: underline; }

/* ---------- Каркас ---------- */

.lk-layout { min-height: 100vh; }

.lk-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lk-sidebar);
  background: var(--lk-navy);
  color: var(--lk-white);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  z-index: 1030;
}

.lk-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lk-white);
  text-decoration: none;
  margin-bottom: 26px;
}
.lk-logo:hover { color: var(--lk-white); text-decoration: none; }

.lk-logo-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--lk-blue);
  font-weight: 700;
  letter-spacing: .5px;
}

.lk-logo-text { font-weight: 600; font-size: 16px; }

.lk-nav { display: flex; flex-direction: column; gap: 4px; }

.lk-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--lk-radius-sm);
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lk-nav-link i { font-size: 18px; color: var(--lk-sky); }
.lk-nav-link:hover { background: rgba(255, 255, 255, .1); color: var(--lk-white); text-decoration: none; }
.lk-nav-link.active { background: var(--lk-blue); color: var(--lk-white); }
.lk-nav-link.active i { color: var(--lk-white); }

.lk-sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.lk-user-name { font-weight: 600; }
.lk-user-mail { color: rgba(255, 255, 255, .65); word-break: break-all; }

.lk-main { margin-left: var(--lk-sidebar); display: flex; flex-direction: column; min-height: 100vh; }

.lk-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--lk-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px;
  background: var(--lk-navy);
  color: var(--lk-white);
  box-shadow: 0 4px 18px rgba(30, 58, 138, .18);
}

.lk-header-title { font-weight: 600; font-size: 17px; }
.lk-header-actions { display: flex; align-items: center; gap: 8px; }

.lk-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  color: var(--lk-white);
  font-size: 18px;
  cursor: pointer;
  transition: background .15s ease;
}
.lk-icon-btn:hover { background: rgba(255, 255, 255, .2); color: var(--lk-white); }

.lk-content { flex: 1; padding: 26px; max-width: 1220px; width: 100%; }

/* ---------- Контент ---------- */

.lk-hero {
  background: linear-gradient(120deg, var(--lk-navy) 0%, var(--lk-blue) 100%);
  color: var(--lk-white);
  border-radius: var(--lk-radius);
  padding: 26px 28px;
  margin-bottom: 26px;
  box-shadow: var(--lk-shadow);
}
.lk-hero h1 { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.lk-hero p { margin: 0; color: rgba(255, 255, 255, .85); }

.lk-section-title { font-size: 18px; font-weight: 600; margin: 0 0 14px; }

.lk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.lk-card {
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--lk-shadow);
}
.lk-card-cover { height: 132px; background: var(--lk-light); }
.lk-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lk-card-title { font-size: 16px; font-weight: 600; margin: 0; }
.lk-card-text { color: var(--lk-muted); font-size: 14px; margin: 0; flex: 1; }
.lk-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lk-price { font-weight: 700; color: var(--lk-navy); }

.lk-notice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lk-notice {
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-left: 4px solid var(--lk-sky);
  border-radius: var(--lk-radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lk-notice i { color: var(--lk-blue); font-size: 18px; }

.lk-placeholder {
  background: var(--lk-white);
  border: 1px dashed var(--lk-sky);
  border-radius: var(--lk-radius);
  padding: 34px;
  text-align: center;
}
.lk-placeholder h1 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.lk-placeholder p { color: var(--lk-muted); margin-bottom: 8px; }
.lk-placeholder-note { font-size: 13px; color: var(--lk-blue); }

/* ---------- Формы, панели ---------- */

.lk-panel {
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  padding: 26px;
  box-shadow: var(--lk-shadow);
}
.lk-panel--narrow { max-width: 460px; }
.lk-panel-title { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
.lk-panel-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.form-control, .form-select {
  border-radius: var(--lk-radius-sm);
  border-color: var(--lk-border);
  padding: 10px 13px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lk-sky);
  box-shadow: 0 0 0 .2rem rgba(96, 165, 250, .25);
}
.form-label { font-weight: 500; margin-bottom: 5px; }
.lk-field-error { color: #DC2626; font-size: 13px; margin-top: 4px; }

.btn-lk {
  background: var(--lk-blue);
  border: 1px solid var(--lk-blue);
  color: var(--lk-white);
  font-weight: 600;
  border-radius: var(--lk-radius-sm);
  padding: 10px 18px;
}
.btn-lk:hover, .btn-lk:focus { background: var(--lk-blue-dark); border-color: var(--lk-blue-dark); color: var(--lk-white); }
.btn-lk:disabled { background: var(--lk-sky); border-color: var(--lk-sky); opacity: .7; }

.btn-lk-outline {
  background: transparent;
  border: 1px solid var(--lk-blue);
  color: var(--lk-blue);
  font-weight: 600;
  border-radius: var(--lk-radius-sm);
  padding: 10px 18px;
}
.btn-lk-outline:hover { background: var(--lk-light); color: var(--lk-navy); }

/* ---------- Страницы без авторизации ---------- */

.lk-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: linear-gradient(150deg, var(--lk-navy) 0%, var(--lk-blue) 60%, var(--lk-sky) 100%);
}

.lk-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--lk-white);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}

.lk-auth-card .lk-logo { color: var(--lk-navy); margin-bottom: 20px; }
.lk-auth-card .lk-logo:hover { color: var(--lk-navy); }
.lk-auth-card .lk-logo-mark { background: var(--lk-navy); color: var(--lk-white); }

.lk-auth-title { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.lk-auth-text { color: var(--lk-muted); font-size: 14px; margin: 0 0 20px; }

.lk-auth-links {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}

/* ---------- Дополнительные элементы кабинета ---------- */

.lk-note {
  background: var(--lk-light);
  border-left: 4px solid var(--lk-blue);
  border-radius: var(--lk-radius-sm);
  padding: 12px 16px;
  color: #1E293B;
  font-size: 14px;
  margin-bottom: 20px;
}

.lk-subtitle { margin: -6px 0 20px; color: var(--lk-muted); font-size: 14px; max-width: 70ch; }

.lk-empty { color: var(--lk-muted); }

.lk-card-meta { color: var(--lk-muted); font-size: 13px; margin: 0; }

.lk-badge-owned,
.lk-badge-expired {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.lk-badge-owned { background: var(--lk-light); color: var(--lk-navy); }
.lk-badge-expired { background: #FEE2E2; color: #B91C1C; }

.lk-badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lk-sky);
  color: var(--lk-navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.lk-header-actions { position: relative; }
.lk-header-actions > a.lk-icon-btn { position: relative; }

.lk-detail-meta { display: flex; align-items: center; gap: 16px; color: var(--lk-muted); }
.lk-detail-cover { max-width: 100%; border-radius: var(--lk-radius); margin-bottom: 18px; }
.lk-detail-text { color: #1E293B; margin-bottom: 18px; }

.lk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lk-table-wrap {
  overflow-x: auto;
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  box-shadow: var(--lk-shadow);
}
.lk-table { width: 100%; border-collapse: collapse; }
.lk-table th,
.lk-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--lk-border); }
.lk-table th { background: var(--lk-light); color: var(--lk-navy); font-weight: 600; font-size: 14px; }
.lk-table tr:last-child td { border-bottom: 0; }
.lk-table-actions { text-align: right; }
.lk-token { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--lk-muted); }

.lk-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: var(--lk-radius);
  overflow: hidden;
  margin-bottom: 18px;
}
.lk-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lk-notice--unread { border-left-color: var(--lk-blue); background: #F8FBFF; }
.lk-notice-body { flex: 1; }
.lk-notice-title { font-weight: 600; }
.lk-notice-text { color: var(--lk-muted); font-size: 14px; }
.lk-notice-date { color: var(--lk-muted); font-size: 12px; }

.lk-placeholder--alert { border-color: #FCA5A5; border-style: solid; }

.lk-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin: 24px 0;
}
.lk-page-link {
  padding: 8px 14px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  background: var(--lk-white);
  font-weight: 500;
}
.lk-page-current { color: var(--lk-muted); font-size: 14px; }

/* ---------- Публичная главная (без авторизации) ---------- */

.lk-public-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  background: var(--lk-navy);
  color: var(--lk-white);
  box-shadow: 0 6px 20px rgba(30, 58, 138, .18);
}
.lk-public-header .lk-logo { margin-bottom: 0; }

.lk-public-nav { display: flex; align-items: center; gap: 4px; }
.lk-public-nav a {
  color: rgba(255, 255, 255, .82);
  padding: 8px 13px;
  border-radius: var(--lk-radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lk-public-nav a:hover { background: rgba(255, 255, 255, .12); color: var(--lk-white); }

.lk-public-content { max-width: 1220px; margin: 0 auto; padding: 22px 26px 10px; width: 100%; }

.lk-landing-hero {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 30px;
  align-items: center;
  padding: 18px 0 30px;
}

.lk-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lk-light);
  color: var(--lk-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lk-landing-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}

.lk-landing-lead {
  max-width: 52ch;
  margin-bottom: 22px;
  color: var(--lk-muted);
  font-size: 17px;
}

.lk-landing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.lk-landing-actions .btn-lg { padding: 12px 22px; font-size: 15px; }

.lk-landing-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--lk-muted);
  font-size: 14px;
}
.lk-landing-points i { margin-right: 6px; color: var(--lk-blue); }

.lk-hero-card {
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 50px rgba(30, 58, 138, .16);
}
.lk-hero-card h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 700; }
.lk-hero-card p { margin: 0 0 12px; color: var(--lk-muted); font-size: 14px; }
.lk-hero-card-meta { margin-bottom: 16px; color: var(--lk-muted); font-size: 13px; }
.lk-hero-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--lk-border);
  padding-top: 14px;
}

.lk-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--lk-light);
  color: var(--lk-navy);
  font-size: 12px;
  font-weight: 700;
}

.lk-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 8px 0 36px;
}
.lk-feature {
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  padding: 18px;
}
.lk-feature i { font-size: 20px; color: var(--lk-blue); }
.lk-feature h3 { margin: 10px 0 6px; font-size: 15px; font-weight: 600; }
.lk-feature p { margin: 0; color: var(--lk-muted); font-size: 14px; }

.lk-landing-section { margin: 34px 0; }
.lk-landing-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.lk-landing-section-head .lk-section-title { margin: 0; }
.lk-link-more { font-size: 14px; font-weight: 600; white-space: nowrap; }

.lk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.lk-step {
  background: var(--lk-white);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  padding: 20px;
}
.lk-step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--lk-navy);
  color: var(--lk-white);
  font-weight: 700;
}
.lk-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.lk-step p { margin: 0; color: var(--lk-muted); font-size: 14px; }

/* ---------- Подвал ---------- */

.lk-footer { margin-top: 34px; border-top: 1px solid var(--lk-border); background: var(--lk-white); }
.lk-footer-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--lk-muted);
  font-size: 14px;
}
.lk-footer-inner nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Мелкие штрихи ---------- */

html { scroll-behavior: smooth; }

.lk-card { transition: transform .18s ease, box-shadow .18s ease; }
.lk-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(30, 58, 138, .14); }

.lk-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Адаптив ---------- */

@media (max-width: 991.98px) {
  .lk-sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    overflow-x: auto;
  }
  .lk-logo { margin-bottom: 0; }
  .lk-logo-text, .lk-sidebar-footer { display: none; }
  .lk-nav { flex-direction: row; gap: 6px; }
  .lk-nav-link { white-space: nowrap; padding: 8px 12px; }
  .lk-main { margin-left: 0; }
  .lk-header { padding: 0 16px; }
  .lk-content { padding: 18px 16px; }

  .lk-landing-hero { grid-template-columns: 1fr; gap: 22px; padding-top: 8px; }
  .lk-public-header { padding: 12px 16px; }
  .lk-public-content { padding: 16px; }
  .lk-footer-inner { padding: 16px; }
}