:root {
      --bg-primary: #f8fafc;
      --bg-secondary: #ffffff;
      --bg-card: #ffffff;
      --text-primary: #1e293b;
      --text-secondary: #64748b;
      --text-muted: #94a3b8;
      --accent: #6366f1;
      --accent-light: #eef2ff;
      --accent-dark: #4f46e5;
      --accent-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      --green: #10b981;
      --green-light: #d1fae5;
      --red: #ef4444;
      --red-light: #fee2e2;
      --orange: #f59e0b;
      --orange-light: #fef3c7;
      --border: #e2e8f0;
      --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
      --radius: 12px;
      --radius-lg: 16px;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; line-height: 1.5; }
    
    /* Header - Skillspace style */
    .header { 
      background: var(--bg-secondary); 
      border-bottom: 1px solid var(--border); 
      padding: 0 2rem; 
      height: 64px;
      position: sticky; 
      top: 0; 
      z-index: 100;
      display: flex;
      align-items: center;
    }
    .header-content { 
      max-width: 1400px; 
      margin: 0 auto; 
      width: 100%;
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
    }
    .logo { 
      display: flex; 
      align-items: center; 
      gap: 12px; 
      font-size: 1.125rem; 
      font-weight: 700; 
      text-decoration: none;
      color: var(--text-primary);
    }
    .logo img { 
      width: 40px; 
      height: 40px; 
      border-radius: 10px;
      box-shadow: var(--shadow);
    }
    .logo span { 
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .header-user { display: flex; align-items: center; gap: 1rem; }
    .header-user-info { text-align: right; }
    .header-user-name { font-weight: 600; font-size: 0.875rem; }
    .header-user-role { font-size: 0.75rem; color: var(--text-muted); }
    
    .container { max-width: min(1920px, 100%); margin: 0 auto; padding: 12px 14px 20px; }
    .admin-layout {
      display: flex;
      align-items: stretch;
      gap: 0.85rem;
      min-height: calc(100vh - 96px);
    }
    .admin-sidebar {
      width: 268px;
      flex-shrink: 0;
      position: sticky;
      top: 80px;
      align-self: stretch;
      max-height: calc(100vh - 96px);
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px 12px;
      box-shadow: var(--shadow);
    }
    .admin-sidebar::-webkit-scrollbar { width: 6px; }
    .admin-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    .admin-main {
      flex: 1;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .admin-main > .section.active {
      flex: 1 1 auto;
      min-height: 0;
    }
    .admin-sidebar-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 14px;
    }
    .admin-sidebar-stat {
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 8px;
      text-align: center;
      min-width: 0;
    }
    .admin-sidebar-stat .stat-value {
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.15;
      display: block;
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .admin-sidebar-stat .stat-label {
      display: block;
      margin-top: 4px;
      font-size: 0.65rem;
      font-weight: 500;
      color: var(--text-muted);
      line-height: 1.25;
    }
    
    /* Login - Modern centered card */
    .login-container { 
      max-width: 420px; 
      margin: 0 auto; 
      padding: 2rem;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    .login-card { 
      background: var(--bg-card); 
      border-radius: var(--radius-lg); 
      padding: 3rem; 
      box-shadow: var(--shadow-xl);
      width: 100%;
    }
    
    /* Cards - Clean modern style */
    .card { 
      background: var(--bg-card); 
      border: 1px solid var(--border); 
      border-radius: var(--radius-lg); 
      padding: 1.5rem; 
      box-shadow: var(--shadow); 
      margin-bottom: 1.5rem;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .card:hover { box-shadow: var(--shadow-md); }
    .card-header { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      margin-bottom: 1.25rem; 
      padding-bottom: 1rem; 
      border-bottom: 1px solid var(--border); 
    }
    .card-title { 
      font-size: 1rem; 
      font-weight: 600; 
      display: flex; 
      align-items: center; 
      gap: 0.5rem;
      color: var(--text-primary);
    }
    
    /* Stats Grid - Skillspace inspired */
    .stats-grid { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
      gap: 1rem; 
      margin-bottom: 1.5rem; 
    }
    .stat-card { 
      background: var(--bg-card); 
      border: 1px solid var(--border); 
      border-radius: var(--radius-lg); 
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      transition: all 0.2s;
    }
    .stat-card:hover { 
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .stat-value { 
      font-size: 1.75rem; 
      font-weight: 700; 
      background: var(--accent-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-label { 
      color: var(--text-secondary); 
      font-size: 0.8rem; 
      margin-top: 0.25rem;
      font-weight: 500;
    }
    
    /* Навигация в боковой панели */
    .nav-groups { 
      display: flex; 
      flex-direction: column;
      flex-wrap: nowrap; 
      gap: 14px; 
      margin-bottom: 0; 
      align-items: stretch; 
    }
    .nav-group { 
      background: var(--bg-primary); 
      border: 1px solid var(--border); 
      border-radius: var(--radius); 
      padding: 10px 8px;
      box-shadow: none;
      width: 100%;
    }
    .nav-group-title { 
      font-size: 0.62rem; 
      font-weight: 600; 
      color: var(--text-muted); 
      text-transform: uppercase; 
      letter-spacing: 0.5px; 
      padding: 0 6px 8px; 
      margin-bottom: 0; 
      border-bottom: 1px solid var(--border);
    }
    .nav-group-tabs { display: flex; flex-direction: column; gap: 3px; flex-wrap: nowrap; padding-top: 8px; }
    .tab { 
      background: none; 
      border: none; 
      color: var(--text-secondary); 
      padding: 9px 10px; 
      font-size: 0.8rem; 
      font-weight: 500;
      cursor: pointer; 
      border-radius: 8px; 
      transition: all 0.2s; 
      white-space: normal; 
      width: 100%;
      text-align: left;
      justify-content: flex-start;
      display: flex;
      align-items: center;
    }
    .tab:hover { 
      color: var(--accent); 
      background: var(--accent-light); 
    }
    .tab.active { 
      background: var(--accent-gradient); 
      color: white;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }
    
    /* Forms - Modern inputs */
    .form-group { margin-bottom: 1.25rem; }
    .form-label { 
      display: block; 
      margin-bottom: 0.5rem; 
      color: var(--text-primary); 
      font-size: 0.875rem; 
      font-weight: 500; 
    }
    .form-input { 
      width: 100%; 
      padding: 0.75rem 1rem; 
      background: var(--bg-primary); 
      border: 2px solid var(--border); 
      border-radius: 10px; 
      color: var(--text-primary); 
      font-size: 0.95rem;
      font-family: inherit;
      transition: all 0.2s;
    }
    .form-input:focus { 
      outline: none; 
      border-color: var(--accent); 
      background: var(--bg-secondary);
      box-shadow: 0 0 0 4px var(--accent-light); 
    }
    .form-input::placeholder { color: var(--text-muted); }
    
    /* Buttons - Skillspace gradient style */
    .btn { 
      padding: 0.75rem 1.25rem; 
      border: none; 
      border-radius: 10px; 
      font-size: 0.875rem; 
      font-weight: 600; 
      cursor: pointer; 
      transition: all 0.2s; 
      display: inline-flex; 
      align-items: center; 
      justify-content: center;
      gap: 0.5rem;
      font-family: inherit;
    }
    .btn-primary { 
      background: var(--accent-gradient); 
      color: white;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    }
    .btn-primary:hover { 
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
    .btn-secondary { 
      background: var(--bg-primary); 
      color: var(--text-primary); 
      border: 1px solid var(--border); 
    }
    .btn-secondary:hover { background: var(--border); }
    .btn-success { 
      background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
      color: white;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    }
    .btn-success:hover { 
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }
    .btn-danger { 
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
      color: white;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
    }
    .btn-danger:hover { 
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    }
    
    /* Tables - Clean modern */
    table { width: 100%; border-collapse: collapse; }
    th, td { 
      padding: 1rem; 
      text-align: left; 
      border-bottom: 1px solid var(--border); 
    }
    th { 
      color: var(--text-muted); 
      font-weight: 600; 
      font-size: 0.7rem; 
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: var(--bg-primary); 
    }
    tr:hover td { background: rgba(99, 102, 241, 0.02); }
    
    /* Badges - Rounded pills */
    .badge { 
      padding: 0.35rem 0.85rem; 
      border-radius: 20px; 
      font-size: 0.7rem; 
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    .badge-purple { background: var(--accent-light); color: var(--accent); }
    .badge-green { background: var(--green-light); color: var(--green); }
    .badge-red { background: var(--red-light); color: var(--red); }
    .badge-gray { background: #f1f5f9; color: #64748b; }
    .badge-orange { background: var(--orange-light); color: #d97706; }
    
    /* База учеников: плашки курсов */
    .student-courses-cell {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 6px;
      max-width: 360px;
    }
    .student-course-badge {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 600;
      padding: 0.22rem 0.5rem;
      border-radius: 6px;
      background: var(--accent-light);
      color: var(--accent);
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      border: 1px solid rgba(99, 102, 241, 0.2);
    }
    
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .grid-2 > .card { min-width: 0; }
    @media (max-width: 960px) {
      .admin-layout {
        flex-direction: column;
        min-height: 0;
      }
      .admin-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        max-height: none;
        align-self: stretch;
      }
    }
    @media (max-width: 768px) { 
      .grid-2 { grid-template-columns: 1fr; }
      .container { padding: 16px; }
    }

    /* Карточки со списками: шапка/фильтры на месте, прокрутка тела таблицы, липкий thead */
    .admin-list-card {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 64px - 36px);
      margin-bottom: 1.5rem;
    }
    .admin-table-scroll {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .admin-list-card .admin-table-scroll {
      flex: 1 1 auto;
      min-height: 0;
    }
    .admin-list-card .admin-table-scroll table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }
    .admin-list-card .admin-table-scroll thead th {
      position: sticky;
      top: 0;
      z-index: 4;
      background: var(--bg-primary);
      box-shadow: 0 1px 0 var(--border);
    }
    .admin-list-card .admin-list-card-footer {
      flex-shrink: 0;
      padding-top: 12px;
      margin-top: 0;
      border-top: 1px solid var(--border);
    }

    /* Прогресс: колонка с таблицей тянется по высоте вровень с меню; скролл внутри таблицы */
    #progressSection .progress-layout {
      display: flex;
      align-items: stretch;
      gap: 0.5rem;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
    }
    #progressSection .progress-layout-main {
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #progressSection .progress-layout-main > .admin-list-card {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      margin-bottom: 0;
    }
    #progressSection #courseDetails {
      flex: 1 1 auto;
      min-height: 0;
      flex-direction: column;
    }
    #progressSection #courseDetails > .admin-list-card {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      margin-bottom: 0;
    }
    #progressSection .progress-stats-rail {
      width: 152px;
      flex-shrink: 0;
      margin-left: auto;
      position: sticky;
      top: 80px;
      align-self: flex-start;
    }
    #progressSection .progress-stats-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 0 !important; /* сброс margin у .stats-grid */
    }
    #progressSection .progress-stats-stack .stat-card {
      margin-bottom: 0;
      padding: 0.7rem 0.55rem;
    }
    #progressSection .progress-stats-stack .stat-value {
      font-size: 1.28rem;
    }
    #progressSection .progress-stats-stack .stat-label {
      font-size: 0.65rem;
      line-height: 1.25;
    }
    #progressSection #courseLessonsPanel.card,
    #progressSection #courseStudentsPanel.card {
      padding: 1rem 1.25rem;
    }
    #progressSection #courseLessonsPanel .card-header,
    #progressSection #courseStudentsPanel .card-header {
      margin-bottom: 0.9rem;
      padding-bottom: 0.75rem;
    }
    /* Таблица учеников курса: без горизонтального скролла, колонки ужимаются */
    #courseStudentsPanel .admin-table-scroll {
      overflow-x: hidden;
    }
    #courseStudentsPanel .admin-table-scroll table {
      table-layout: fixed;
      width: 100%;
    }
    #courseStudentsPanel .admin-table-scroll th,
    #courseStudentsPanel .admin-table-scroll td {
      padding: 0.55rem 0.42rem;
      font-size: 0.8125rem;
      vertical-align: top;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    #courseStudentsPanel .admin-table-scroll thead th {
      font-size: 0.7rem;
      line-height: 1.2;
      padding: 0.5rem 0.35rem;
    }
    #courseStudentsPanel .admin-table-scroll td .badge {
      font-size: 0.68rem;
      padding: 0.25rem 0.45rem;
    }
    #courseStudentsPanel .admin-table-scroll td .btn {
      padding: 4px 7px;
      font-size: 12px;
    }
    #courseStudentsPanel .admin-table-scroll .cs-progress-row {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }
    #courseStudentsPanel .admin-table-scroll .cs-progress-bar-wrap {
      flex: 1;
      min-width: 48px;
      height: 8px;
      background: var(--bg-primary);
      border-radius: 4px;
      overflow: hidden;
    }
    @media (max-width: 1100px) {
      #progressSection .progress-layout {
        flex-direction: column;
      }
      #progressSection .progress-stats-rail {
        width: 100%;
        position: relative;
        top: 0;
        order: -1;
      }
      #progressSection .progress-stats-stack {
        flex-direction: row;
        flex-wrap: wrap;
      }
      #progressSection .progress-stats-stack .stat-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 140px;
      }
    }
    
    /* Modals - Smooth animations */
    .modal-overlay { 
      position: fixed; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      display: flex; 
      align-items: flex-start; 
      justify-content: center; 
      z-index: 1000; 
      opacity: 0; 
      visibility: hidden; 
      transition: all 0.3s; 
      overflow-y: auto; 
      padding: 40px 20px; 
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal { 
      background: var(--bg-card); 
      border-radius: var(--radius-lg); 
      padding: 2rem; 
      max-width: 500px; 
      width: 90%; 
      box-shadow: var(--shadow-xl); 
      margin: auto;
      transform: scale(0.95);
      transition: transform 0.3s;
    }
    .modal-overlay.active .modal { transform: scale(1); }
    .modal-header { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }
    .modal-header h3 { font-size: 1.125rem; font-weight: 600; }
    .modal-close { 
      background: var(--bg-primary); 
      border: none; 
      width: 32px;
      height: 32px;
      border-radius: 8px;
      font-size: 1.25rem; 
      cursor: pointer; 
      color: var(--text-muted);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-close:hover { background: var(--border); color: var(--text-primary); }
    
    /* Alerts */
    .alert { 
      padding: 1rem 1.25rem; 
      border-radius: 10px; 
      margin-bottom: 1rem; 
      font-size: 0.875rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .alert-success { background: var(--green-light); color: #065f46; }
    .alert-error { background: var(--red-light); color: #b91c1c; }
    
    /* Search */
    .search-box { position: relative; margin-bottom: 1rem; }
    .search-box input { padding-left: 2.75rem; }
    .search-icon { 
      position: absolute; 
      left: 1rem; 
      top: 50%; 
      transform: translateY(-50%); 
      color: var(--text-muted); 
    }
    
    .section { display: none; }
    .section.active { display: block; animation: fadeIn 0.3s ease; }
    /* Прогресс: flex-колонка на всю высоту main (нижний край вровень с меню) */
    #progressSection.section.active {
      display: flex;
      flex-direction: column;
    }
    /* База учеников: высота как у меню (max-height), таблица со скроллом и пагинацией */
    #studentsSection.section.active {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 96px);
      min-height: 0;
      flex: 1 1 auto;
    }
    #studentsSection .admin-list-card {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
    }
    /* Статистика: воронка курса */
    #statisticsSection.section.active {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 96px);
      min-height: 0;
      flex: 1 1 auto;
    }
    #statisticsSection .admin-list-card {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
    }
    .stats-funnel-hint {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.45;
      margin-bottom: 1rem;
      padding: 0.65rem 0.85rem;
      background: var(--bg-primary);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .stats-funnel-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      margin-bottom: 14px;
      font-size: 0.85rem;
      color: var(--text-secondary);
    }
    .stats-funnel-meta strong { color: var(--text-primary); }
    .funnel-step-row {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(120px, 2.2fr) auto;
      gap: 10px 14px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .funnel-step-row:last-child { border-bottom: none; }
    .funnel-step-title { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
    .funnel-step-mod { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
    .funnel-bar-track {
      height: 22px;
      background: var(--bg-primary);
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .funnel-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #6366f1, #8b5cf6);
      border-radius: 7px;
      min-width: 4px;
      transition: width 0.35s ease;
    }
    .funnel-step-metrics {
      text-align: right;
      font-size: 0.72rem;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .funnel-drop-warn {
      color: #dc2626;
      font-weight: 600;
    }
    @media (max-width: 900px) {
      .funnel-step-row {
        grid-template-columns: 1fr;
      }
      .funnel-step-metrics { text-align: left; }
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    
    .loading { text-align: center; padding: 3rem; color: var(--text-secondary); }
    
    /* Autocomplete */
    .autocomplete { position: relative; }
    .autocomplete-list { 
      position: absolute; 
      top: 100%; 
      left: 0; 
      right: 0; 
      background: var(--bg-card); 
      border: 1px solid var(--border); 
      border-radius: 10px; 
      box-shadow: var(--shadow-lg); 
      max-height: 200px; 
      overflow-y: auto; 
      z-index: 100; 
      display: none;
      margin-top: 4px;
    }
    .autocomplete-list.show { display: block; }
    .autocomplete-item { 
      padding: 12px 14px; 
      cursor: pointer; 
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .autocomplete-item:last-child { border-bottom: none; }
    .autocomplete-item:hover { background: var(--accent-light); }
    .autocomplete-item strong { color: var(--text-primary); }
    .autocomplete-item small { color: var(--text-muted); }
    
    /* Scrollbar styling */
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    
    /* Selection */
    ::selection { background: var(--accent-light); color: var(--accent-dark); }